2

I am a bit confused about how differently the jQuery append() and the Javascript appendChild() functions handle an Element that calls the document.write() function within.

Here's my HTML Code: 

<div id="main-area">
</div>

<div id="temp-area">
    <div id="content">
        <script>
            document.write('Lorem Ipsum Dolor...');
        </script>
    </div>
</div>

I basically want to put the whole Element '#content' and all its Contents, including the 'Lorem Ipsum' Javascript Bit from '#temp-area' to '#main-area'. My first approach was simple jQuery:

target = jQuery('#main-area');
content = jQuery('#content');
target.append(content);

This works, but with one exception: the 'Lorem Ipsum Dolor' text is written once in the '#content' Element where it belongs, now within the '#main-area' div, AND once beneath both divs at the bottom of the page (without the '#content' div wrapping the text). Of course, I want the text to be shown only once, within the '#content' div. If I write the Lorem Ipsum text as static HTML, the whole thing works just fine, so it's got to have something to do with the document.write function and how this affects the DOM Tree, right? So i experimented a little more and came to this solution:

target = jQuery('#main-area').get(0);
content = jQuery('#content').get(0);
target.appendChild(content);

With this Code, the Lorem Ipsum Text is only written once in the HTML Document, and exactly where i want it to be. Problem solved.

But i don't get how and why this approach works and the other one doesn't. So I'm not asking for a solution to my problem, but for an explanation as to why both approaches handle things so differently to understand whats going on here. Is there perhaps a wholly different solution to the scenario that I'm missing and that's easier to understand?

(i tested in firefox and opera)

Thanks

hodgesaargh
  • 110
  • 1
  • 2
  • 8

2 Answers2

1

Please read this question and answer.

Basically, the <script> needs to be added to the DOM directly to be executed via appendChild. So I guess as a child of another element this won't work. But if added through jQuery, then jQuery will manage any script content itself and make sure it gets executed. See jQuery source and search for

clean: function( elems, context, fragment, scripts ) {

This is a function that strips <script> tags out, and they ultimately will be executed by jQuery.

Here's a small jsfiddle demo of options.

Community
  • 1
  • 1
Paul Grime
  • 14,970
  • 4
  • 36
  • 58
  • Thanks for your answer. So basically, the function is executed once when the HTML is loaded. After that, when appending the element with jQuery, jQuery executes it again, but from the position in the DOM Tree at which the jQuery Code is loaded, which is, in most cases, at the bottom of the page? Can i somehow tell jQuery to NOT handle the script itself? – hodgesaargh Sep 13 '11 at 12:04
  • Not exactly. If a `document.write` call is executed *after* the original document has loaded, then the `write` call will overwrite *all* the body content of the original document. So the first time your `write` is called, it is contributing to the original document as it's being built-up. The 2nd time it's called (if it *is* actually called), it will overwrite the original document and the only content you will have is that which is written by the script. – Paul Grime Sep 13 '11 at 12:17
1

You don't need jQuery for this behaviour.

Simply use JavaScript DOM functions:

var target = document.getElementById('main-area'),
    content = document.getElementById('content');

target.appendChild(content);

You can see it working Here

AlexBay
  • 1,323
  • 2
  • 14
  • 26