为什么前DOM没有被追加？

Question

以下是一个代码段，它会创建一个包装器div，然后在其中添加一个pre元素。然而，这似乎不起作用。

var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
t.wrap(container);
var pre = $('<pre>');
pre.appendTo(container); // Seems to have no effect

当我运行此代码并检查元素时，我看不到pre元素。

可以在此处查看工作演示 - http://jsfiddle.net/ueb2pq6o/

Answer 1

  

为什么没有附加前DOM？

由于wrap创建了您提供的元素的副本，因此它不会使用原件。来自the docs：

  

此结构的副本将包含在匹配元素集中的每个元素周围。

您可以使用t.parent()代替container

轻松解决此问题

pre.appendTo(t.parent());

var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
t.wrap(container);
var pre = $('<pre>');
pre.appendTo(t.parent()); // <== Change is here

textarea {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>

或者，使用在textarea之前插入容器，然后使用append：

container.insertBefore(t);
t.appendTo(container);

var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
container.insertBefore(t); // <== Change is here
t.appendTo(container);     // <== and here
var pre = $('<pre>');
pre.appendTo(container);

textarea {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>

Answer 2

您使用t通过container包裹的container实际上并未添加到DOM中。 使用类或ID指定添加pre

的位置

var t = $('#t');
var container = $('<div id="foo">');
container.css('position', 'relative');
t.wrap(container);
var pre = $('<pre>');
pre.appendTo("#foo");