jQuery 嵌套追加答案

【问题标题】：jQuery nest appendsjQuery 嵌套追加
【发布时间】：2016-07-20 09:10:59
【问题描述】：

可以在jQuery中嵌套追加吗？？

我尝试过这样做：

var div = $('#ui-container');
var div2 = div.append( $('<div/>').addClass('second') );
var div3 = div2.append( $('<div/>').addClass('third') );

我想要这个：

<div id='ui-container'>
  <div class='second'>
    <div class='third'></div>
  </div>
</div>

但我明白了：

<div id='ui-container'>
  <div class='second'></div>
  <div class='third'></div>
</div>

【问题讨论】：

标签： javascript jquery append

【解决方案1】：

你必须像下面那样做，

var div = $('#ui-container');
var div2 = $('<div/>').addClass('second').appendTo(div);
var div3 = div2.append($('<div/>').addClass('third'));

使用.appendTo()。因为.append() 将返回调用附加函数的对象。这就是为什么您会在您的案例中看到这样的结果。

【讨论】：

【解决方案2】：

试试：

var div = $('#ui-container');
var div2 =  $('<div/>').addClass('second');
div2.append( $('<div/>').addClass('third') );
div.append(div2);

【讨论】：

【解决方案3】：

jquery 方法通常返回调用它们的 DOM 节点。

因此

var div2 = div.append( $('<div/>').addClass('second') ); // returns $('#ui-container')

使用$（例如$div）引用DOM元素也是标准的。

这是一个详细的解决方案

// Grab container
$div = $('#ui-container');
// Create first child
var div2 = '<div class="second"></div>'
// Append .second to #ui-container
$div.append(div2);

// Grab .second from the DOM
var $div2 = $('.second');
// Create grandchild element
var div3 = '<div class="third"></div>'
// Append to .second
$div2.append(div3)

codepen

【讨论】：

【解决方案4】：

@Rajaprabhu Aravindasamy 有正确的答案。我想我会更深入一点并添加jsfiddle。

使用appendTo() 而不是append。这是http://api.jquery.com/appendto/的引述

.append() 和 .appendTo() 方法执行相同的任务。主要区别在于语法，内容和目标的位置。使用 .append()，方法前面的选择器表达式是插入内容的容器。另一方面，使用 .appendTo()，内容位于方法之前，可以作为选择器表达式或动态创建的标记，然后插入到目标容器中。

这是标记：

var div = $('#ui-container');
var div2 =  $('<div>div2<div/>').addClass('second').appendTo(div);
var div3 = $('<div>div3<div/>').addClass('third').appendTo(div2);

【讨论】：

【解决方案5】：

您的所有变量 div、div2 和 div3 均指代同一元素 $('#ui-container')。理解你所做的最简单的方法是重命名你的变量，这样你就可以看到发生了什么：

/* What you did is this: */
var container = $('.result1');
var containerWithSecondAppended = container.append( $('<div/>').addClass('second') );
var containerWithThirdAppended = containerWithSecondAppended.append( $('<div/>').addClass('third') );

/* What you wanted to do is this: */
var div = $('.result2');
var div2 = $('<div/>').addClass('second');
var div3 = $('<div/>').addClass('third');
div.append( div2.append(div3) );

div {
	padding: 10px;
	border: 1px solid black;
}
.result {
	margin: 10px;
	padding: 10px;
}
.second {
	background: none yellow;
}
.third {
	background: none green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result result1"></div>
<div class="result result2"></div>

同样在Fiddle。

jQuery append method 将返回一个 jQuery 元素，即附加（更改）的元素。

【讨论】：