cloneNode() not getting script tag content

[chippy]

I am finding that when I use the cloneNode method to copy an HTML
element that contains a <script> tag, the contents of the <script> tag,
(ie. the javascript) are removed.

If I do this:
var form1 = document.getElementById(sID).firstChild.cloneNode(true);
alert(form1.outerHTML);

I can see the empty <script> tags. I am wondering if there is a
reasonable workaround for this, because I need the script tag with its
javascript content.

Thanks
Chip

 

[Martin Honnen]

I am finding that when I use the cloneNode method to copy an HTML
element that contains a <script> tag, the contents of the <script> tag,
(ie. the javascript) are removed.

If I do this:
var form1 = document.getElementById(sID).firstChild.cloneNode(true);
alert(form1.outerHTML);

I can see the empty <script> tags.

Seems to be an IE quirk, happens with both JavaScript and VBScript
inline code here for me with IE 6 on Windows XP SP 2.
Mozilla seems to do fine (well it does not have outerHTML support at all
but if I use innerHTML instead I can see the inline script code of
cloned script elements).
Opera 8 looses the inline script code (at least when looking at
outerHTML), Opera 9 Preview has it.

Why do you think you need to clone script code? Do you want to move it
into another window or frame? It does not seem to do much good to insert
cloned script functions into the same document.

 

[chippy]

Martin,
Thank you for your reply.
I'll give some background on what I am doing. I have an HTML form that
is used for filling out text messages. (This form is created
dynamically using an XML Schema and XSLT.) Certain sections of the
message that the user is creating with this form may be repeated, so I
have created a button that runs a javascript function that copies the
portion of the form that may be repeated. The portion of the form that
can be repeated is surrounded by a form tag with a unique id that I
pass into the function. So I can do this:

var form1 = document.getElementById(sID).firstChild.cloneNode(true)

where sID is the id that is passed into the function and I get all of
the elements under the form tag.

With the script tags I am filling out a javascript associative array:

<script language="javascript" type="text/javascript">
fieldData["IDAEA1VIDAFA1V4"]
= {
DivID: "sic_code_4sic_code_or_filing_number",
ID: "IDATE0VIDAUE0V4",
Size: "3",
Type: "xsd:string",
Enum: "false",
minLength: "",
maxLength: "",
Length: "3",
minInclusive: "",
maxInclusive: "",
Pattern: "[A-Z0-9]{3}",
Enumeration: ""};
</script>


With the sID I am also able to reference the appropriate index of the
array. The array contains information that I use for validating the
input. Once I have a copy of the element, I can use the RegEx replace
to make all of the id's and the javascript (the array) unique.

I guess the bottom line is that I need some way to copy the elements I
need without doing it by reference (because then when I make changes to
the copied element the changes also go into the element I copied from).


I have tried to use a copy function like this:

function copy_obj(o) {
var c = new Object();

for (var e in o) {
c[e] = o[e];
}
return c;
}

but it appears that I am not getting an actual DOM object because it
doesn't recognize certain methods.

Anyhow, I think I have rambled on enough. I hope this gives you a
clear idea of what's happening, I appreciate any suggestions you might
have.

Many thanks.
Chip

 

[Martin Honnen]

chippy wrote:

With the script tags I am filling out a javascript associative array:

<script language="javascript" type="text/javascript">
fieldData["IDAEA1VIDAFA1V4"]
= {
DivID: "sic_code_4sic_code_or_filing_number",
ID: "IDATE0VIDAUE0V4",
Size: "3",
Type: "xsd:string",
Enum: "false",
minLength: "",
maxLength: "",
Length: "3",
minInclusive: "",
maxInclusive: "",
Pattern: "[A-Z0-9]{3}",
Enumeration: ""};
</script>


With the sID I am also able to reference the appropriate index of the
array. The array contains information that I use for validating the
input. Once I have a copy of the element, I can use the RegEx replace
to make all of the id's and the javascript (the array) unique.

But if that array (that looks like a JavaScript object to me) is a
global variable then simply manipulate it with your code, don't try to
rely on DOM node cloning to manipulate/copy JavaScript data structures
you control yourself.

I guess the bottom line is that I need some way to copy the elements I
need without doing it by reference (because then when I make changes to
the copied element the changes also go into the element I copied from).


I have tried to use a copy function like this:

function copy_obj(o) {
var c = new Object();

for (var e in o) {
c[e] = o[e];
}
return c;
}

But you can do e.g.

var fieldData = {};
fieldData["IDAEA1VIDAFA1V4"]
= {
DivID: "sic_code_4sic_code_or_filing_number",
ID: "IDATE0VIDAUE0V4",
Size: "3",
Type: "xsd:string",
Enum: "false",
minLength: "",
maxLength: "",
Length: "3",
minInclusive: "",
maxInclusive: "",
Pattern: "[A-Z0-9]{3}",
Enumeration: ""};

function copy_obj(o) {
var c = new Object();

for (var e in o) {
c[e] = o[e];
}
return c;
}

fieldData['newId'] = copy_obj(fieldData["IDAEA1VIDAFA1V4"]);
fieldData['newId'].ID = 'newId';

As said, I would not mix your script data structure manipulation with
DOM manipulation. If you simply keep track of any stuff in fieldData
then your script can always add properties there and manipulate
subproperties without any need that the browser supports cloning inline
script elements and executing the cloned code when the cloned script
element is being inserted into the document. That approach is a rather
fragile.

 

[chippy]

I hear you-- scrap the RegEx replace on the script element, and just
use the existing fieldData array (object)-- this makes too much sense,
I'll give it a whirl. I have definitely been doing it the hard way.