javascript – 在没有自动关闭标记的元素之前和之后插入内容

2022-09-20 18:09:42

说我有以下内容：

<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会自动“纠正”未关闭的标签.

有没有办法使用.wrap()在元素之前和之后添加不同的内容而不自动关闭标签？

请注意,由于不相关的限制,我无法执行以下操作：

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

解决方法:

您无法插入部分或未封闭的标签.在DOM中插入元素必须只插入整个元素.

你的选择是：

>提取要在新元素中包装的元素,插入新的容器对象,然后将原始元素放入容器中.
>直接操作父级的HTML(通常不推荐).
>使用jQuery .wrap()方法为您执行#1中的选项.有关jQuery的.wrap()的更多信息,请参阅here.

码农公寓