Question

我对jQuery append（）和Javascript appendChild（）函数处理调用document.write（）函数的Element有多么不同感到有点困惑。

这是我的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'中的'Lorem Ipsum'Javascript Bit'添加到'#main-area'。我的第一种方法是简单的jQuery：

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

这是有效的，但有一个例外：'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执行。所以我想作为另一个元素的孩子，这将无法奏效。但是如果通过jQuery添加，那么jQuery将自己管理任何脚本内容并确保它被执行。请参阅jQuery source并搜索

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

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

这是small jsfiddle demo of options。

Answer 2

此行为不需要jQuery。

只需使用JavaScript DOM功能：

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

target.appendChild(content);

您可以看到它有效Here

JQuery追加和Javascript appendChild与附加的Element中的document.write

2 个答案: