jQuery的插入内容之前并没有Autoclosing标签的元素后

Question

说我有以下几点：

<div id="content">content</div> 

我要插入一些东西之前（注意未闭合的div）：

$("#content").before("<div>pre-pre-content</div><div>pre-content "); 

还有一些之后（注意我现在正在关闭div）：

$("#content").after(" post-content</div><div>post-post-content</div>"); 

我所需的输出是：

<div>pre-pre content</div> 
<div> 
    pre-content <div id="content">content</div> post-content 
</div> 
<div>post-post content</div> 

相反，我得到的是：

<div>pre-pre content</div> 
<div>pre-content</div> 
<div id="content">content</div> 
<div>post-content</div> 
<div>post-post content</div> 

因为jQuery将自动为 “纠正” 的未关闭标签。

fiddle

是否有使用.wrap（）添加前后的元素不同的内容，而自动关闭标签的方法吗？

注意，我不能执行下列操作，因为一个不相关的限制：

$("#content").html("<div>Content before " + $("#content).html() + " Content after</div>") 

Answer 1

无法插入部分或未关闭标签。在DOM中插入元素只能插入整个元素。

你的选择是：

1. 提取想要的元素被包裹在你的新元素，将新的容器对象，然后把你的原始元素到容器中。

2. 直接操作父代的HTML（通常不推荐）。

3. 使用jQuery .wrap()方法，它在＃1中为您执行选项。有关jQuery的更多信息，请参阅here.wrap()。