如何合并三个html元素答案

【问题标题】：How can I merge three html elements如何合并三个html元素
【发布时间】：2022-11-17 17:51:03
【问题描述】：

假设我有以下结构：

<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

【问题讨论】：

您是在谈论以编程方式与 JS 合并吗？如果不是，这感觉就像一个奇怪的问题。
是的，对不起，我更新了问题
它总是三个元素吗？他们总是在新的线路上吗？它们是否都应该包含在最先出现的标签中？
您可以将跨度附加到第一段，然后将第二段的文本节点附加到第一段。但是您仍然需要在跨度前后显式添加所需的空格，因此要么创建新的文本节点并附加它们，要么预先操作段落的文本内容。

标签： javascript html

【解决方案1】：

这是这些情况下的解决方案

元素是三个

第一个元素标签与第三个元素标签相同。

const container = document.querySelector('.container')

if (container.children.length !== 3) {
  throw new Error('container element childrens' is not equal to three');
}

const [first, second, third] = container.children;

if (first.tagName !== third.tagName) {
  throw new Error('first element tag name not same as the third one.');
}
first.appendChild(document.createTextNode(' '));
first.appendChild(second);
first.appendChild(document.createTextNode(' ' + third.textContent));

container.innerHTML = ''
container.appendChild(first)

<div class="container">
  <h1>lorem ipsum</h1>
  <span>dolor</span>
  <h1>sit amen</h1>
</div>

【讨论】：

【解决方案2】：

你可以试试这个代码。

console.log( "<h1>" + 
document.querySelectorAll("h1")[0].innerHTML + " " + 
document.querySelector("span").outerHTML + " " + 
document.querySelectorAll("h1")[1].innerHTML + 
"<h1>")

【讨论】：

【解决方案3】：

您是否有机会提供您想要实现的目标？我相信仅仅承认这是否是前进的最佳方式会有所帮助？

【讨论】：