JQuery append和Javascript appendChild以及document.write-in追加元素

对于jQuery append（）和Javascript appendChild（）函数处理调用其中document.write（）函数的元素的方式有多不同，我感到有点困惑

以下是我的HTML代码：

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

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

这是可行的，但有一个例外：“Lorem Ipsum Dolor”文本只在它所属的“#content”元素中写入一次，现在在“#main area”div中，在页面底部的两个div下写入一次（没有“#content”div包装文本）。当然，我希望文本只在“#content”div中显示一次。如果我将Lorem Ipsum文本作为静态HTML编写，整个过程就可以正常工作，因此它必须与document.write函数有关，这会如何影响DOM树，对吗？所以我做了更多的实验，得出了这个解决方案：

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

有了这段代码，Lorem Ipsum文本在HTML文档中只编写一次，并且正好是我想要的位置。问题解决了

但我不明白这种方法如何以及为什么有效，而另一种方法却不行。因此，我不是在要求解决我的问题，而是要解释为什么这两种方法处理事情的方式如此不同，以理解这里发生了什么。对于我遗漏的场景，是否有一种完全不同的解决方案更容易理解

（我在firefox和opera中测试过）

谢谢

请阅读

基本上，

需要直接添加到DOM中，通过

appendChild

执行。所以我想作为另一个元素的孩子，这是行不通的。但是，如果通过jQuery添加，那么jQuery将自己管理任何脚本内容，并确保它得到执行。查看并搜索

clean：函数（元素、上下文、片段、脚本）{

这是一个剥离

标记的函数，它们最终将由jQuery执行

---

这里有一个。

您不需要jQuery来实现这种行为

只需使用JavaScript DOM函数：

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

target.appendChild(content);

---

您可以看到它正在工作

感谢您的回答。因此，基本上，当加载HTML时，函数只执行一次。之后，当使用jQuery附加元素时，jQuery再次执行它，但是从DOM树中加载jQuery代码的位置开始执行，在大多数情况下，它位于页面底部？我能告诉jQu吗是否不处理脚本本身？不完全正确。如果在加载原始文档后执行

document.write

调用，则

write

调用将覆盖原始文档的所有正文内容。因此，第一次调用

write

时，它将在生成原始文档时对其作出贡献第二次调用时（如果实际调用），它将覆盖原始文档，您将拥有的唯一内容是脚本编写的内容。

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

target.appendChild(content);