Question

我想知道在使用appendTo（）时是否可以创建一个新元素作为目标。我在网上找不到任何东西。

例如：

$("p:even").clone().appendTo( **NEW: $(".Target").append("<div class='new'>"**) );

重点是将对象集合添加到另一个元素中的新div。

Answer 1

不是那样的。这就是你所要求的，但看起来很复杂：

$("p:even").clone().appendTo($("<div class='new'></div>").appendTo($(".Target")));

相反，你应该明确，例如：

var newDiv = $("<div class='new'></div>");
var pEven = $("p:even");
var target = $(".Target");
newDiv.append(pEven.clone());
target.append(newDiv);

我觉得我可能误解了你的要求。如果您只想创建一个新元素，最终得到一个可以使用appendTo的jQuery对象，它就像$('<div></div>')。

Answer 2

有很多方法可以在jQuery中动态创建元素。我试着像这样记住它：如果那里有，但是如果你说它在那里，它就在那里。 jQuery对象$()将解析HTML字符串：

$('<main id="alpha" class="prime" name="first">NUMBER ONE</main>');

将创建的元素存储在变量中（带$的var只是区分普通对象和jQuery对象的方法）：

var $ele = $('<div/>');

虽然已创建，但在创建之后或创建过程中添加它时，它不在DOM上：

$('<div class="new"></div>').appendTo('body')[0];

有关详细信息，请参阅此page。

＆＃13;

var $clones = $('p:nth-child(2n+1)').clone();
var $new = $('<div class="new">NEW</div>').appendTo('.Target');
$clones.appendTo($new);

＆＃13;

p:nth-child(odd) {
  background: rgba(0, 0, 255, .4);
}
p:nth-child(even) {
  background: rgba(255, 0, 0, .4);
}
.Target {
  border: 3px dashed blue;
}
.new {
  border: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>

<section class="Target">TARGET</section>

＆＃13;

如何appendTo（）一个新元素

2 个答案: