javascript - JQuery append 和 Javascript appendChild 在附加元素中带有 document.write

Question

我对 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>

我基本上想把整个元素“#content”及其所​​有内容，包括从“#temp-area”到“#main-area”的“Lorem Ipsum”Javascript Bit。我的第一个方法是简单的 jQuery:

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

这行得通，但有一个异常(exception):“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 中测试过)

谢谢

Answer 1

请阅读this question and answer .

基本上，<script>需要直接添加到 DOM 以通过 appendChild 执行.所以我想作为另一个元素的 child ，这是行不通的。但如果通过 jQuery 添加，则 jQuery 将自行管理任何脚本内容并确保它得到执行。参见 jQuery source并搜索

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

这是一个剥离 <script> 的函数标记出来，它们最终将由 jQuery 执行。

这是一个 small jsfiddle demo of options .