jQuery nest追加

Question

是否可以在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>

Answer 1

你必须这样做，

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

使用.appendTo()。因为.append()将返回调用append函数的对象。这就是为什么你在你的情况下看到这样的结果。

Answer 2

尝试：

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

Answer 3

@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);

Answer 4

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

Answer 5

您的所有变量urlpatterns = [ url(r'^index/$', views.Index, name='index'), url(r'^api/', include(router.urls)), url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')), ] ，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;
}

同样在Fiddle。

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