如何合并三个html元素

e4yzc0pl 于 2022-11-20 发布在其他

关注(0)|答案(4)|浏览(184)

假设我有下面的结构：

<p>lorem ipsum</p>
<span>dolor</span>
<p>sit amen</p>

在JS中以编程方式获取以下内容的最佳方法是什么？

<p>lorem ipsum <span>dolor</span> sit amen</p>

是否也可以使用不同的标记来实现此功能，例如

<h1>lorem ipsum</h1>
<span>dolor</span>
<h1>sit amen</h1>

这将导致

<h1>lorem ipsum <span>dolor</span> sit amen</h1>

我说的不仅仅是三个要素：也可以是这样的：

p
span
p
span
p

Html

来源：https://stackoverflow.com/questions/74473055/how-can-i-merge-three-html-elements

4条答案

按热度按时间

gev0vcfq1#

你可以试试这个代码。

const h1tag = document.createElement("h1");
const node = document.createTextNode( 
    document.querySelectorAll("h1")[0].innerHTML + " " + 
    document.querySelector("span").outerHTML + " " + 
    document.querySelectorAll("h1")[1].innerHTML  
    );
h1tag.appendChild(node);

赞(0）回复(0）举报 2022-11-20

k5ifujac2#

此解决方案可用于任意数量的元素，这些元素将与第一个元素的tag合并，如果该元素具有与第一个元素相同的标签，则它将与其textContent合并，如果不是，则它将附加其标签。
第一个

赞(0）回复(0）举报 2022-11-20

rks48beu3#

你可以这样做：
第一个
根据需要，在查询选择器中将p替换为h1。

赞(0）回复(0）举报 2022-11-20

vecaoik14#

因此，可能是<p>或<h1>标记，或者其他什么标记，我假设您可以在需要重新构造的元素周围添加容器。
第一个

赞(0）回复(0）举报 2022-11-20