jQuery 嵌套追加

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() 将 return 调用追加函数的对象。这就是为什么您会在您的案例中看到这样的结果。

Answer 2

尝试：

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

Answer 3

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

因此

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

使用 $ 引用 DOM 元素也是标准的，例如 $div.

这是一个详细的解决方案

// 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 4

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

使用 appendTo() 而不是 append。这是来自 http://api.jquery.com/appendto/

的引述

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

这是标记：

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

Answer 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 将 return 一个 jQuery 元素，即被追加（更改）的元素。

jQuery 嵌套追加

jQuery nest appends

javascript

jquery

append