Question

请您查看this demo并告诉我为什么我无法将#source div加载到#target div中？

<div id="source">
    <div class="source-inn"><a>A</a></div>
    <div class="source-inn"><p>B</p></div>
    <div class="source-inn"><span>C</span></div>
</div>

<div id="target"></div>
<script> 
$( "#source" ).load( "#target" );
</script>

Answer 1

这里不需要使用.load（），因为这是从服务器加载数据并将返回的HTML放入匹配的元素（doc for .load is here）。

我建议.append()使用.children()这样的元素：

http://jsfiddle.net/csdtesting/rc9kgekc/

$('#target').append($('#source').children());

之后的DOM结果将是：

<div id="source">

<div id="target">
    <div class="source-inn"><a>A</a></div>
    <div class="source-inn"><p>B</p></div>
    <div class="source-inn"><span>C</span></div>
</div>
</div>

但是，如果您希望DOM结果如此：

<div id="target">
    <div id="source">
         <div class="source-inn"><a>A</a></div>
         <div class="source-inn"><p>B</p></div>
         <div class="source-inn"><span>C</span></div>
    </div>
</div>

然后，您将在没有.children（）的情况下使用它： http://jsfiddle.net/csdtesting/aywww7r7/

  $('#target').append($('#source'));

希望这有帮助！

Answer 2

您希望将div附加到源代码，如下所示：

$( "#source" ).append( $("#target") );

请注意，由于目标div不具有相同的类，因此css不会应用于目标。

将Div整个内容加载到New Div的问题

2 个答案: