cloneNode() not getting script tag content

Discussion in 'Javascript' started by chippy, Jan 3, 2006.

  1. chippy

    chippy Guest

    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
    chippy, Jan 3, 2006
    #1
    1. Advertising

  2. chippy wrote:

    > 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.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jan 3, 2006
    #2
    1. Advertising

  3. chippy

    chippy Guest

    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
    chippy, Jan 4, 2006
    #3
  4. 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.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jan 4, 2006
    #4
  5. chippy

    chippy Guest

    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.
    chippy, Jan 4, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?TW9ua2V5Qm95?=
    Replies:
    2
    Views:
    434
    =?Utf-8?B?TW9ua2V5Qm95?=
    Jun 6, 2004
  2. shruds
    Replies:
    1
    Views:
    744
    John C. Bollinger
    Jan 27, 2006
  3. Sullivan WxPyQtKinter
    Replies:
    0
    Views:
    1,900
    Sullivan WxPyQtKinter
    Mar 14, 2006
  4. Chameleon

    appendChild & cloneNode

    Chameleon, Jun 1, 2009, in forum: XML
    Replies:
    25
    Views:
    3,709
    Thomas 'PointedEars' Lahn
    Jun 3, 2009
  5. itsme

    XmlDocument and cloneNode

    itsme, Oct 14, 2003, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    143
    itsme
    Oct 14, 2003
Loading...

Share This Page