如何 appendTo() 一个新元素

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。

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

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;
}

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

如何 appendTo() 一个新元素

How to appendTo() a new element

jquery

appendto