我如何合并三个html元素

Question

假设我有以下结构:

<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

Answer 1

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

const container = document.querySelector('.container')
const [first, ...rest] = container.children;
const result = rest.reduce((acc, child) => {
if (child.tagName === first.tagName) {
first.appendChild(document.createTextNode(' ' +
child.textContent));
} else {
first.appendChild(document.createTextNode(' '));
first.appendChild(child);
}
return acc;
}, first)

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

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

Answer 2

您可以试试这段代码。

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);

Answer 3

你可以这样做:

const inPnl = document.getElementById('input');
const elems = inPnl.querySelectorAll('p, span');
const outPnl = document.getElementById('output');
elems[0]
.appendChild(elems[1])
.appendChild(document.createTextNode(elems[2].innerText));
outPnl.appendChild(elems[0]);

<em>input:</em>
<div id=input>
<p>lorem ipsum</p>
<span>dolor</span>
<p>sit amen</p>
</div>
<em>output:</em>
<div id=output>
</div>

根据需要将查询选择器中的p替换为h1。

Answer 4

所以它可能是<p>或<h1>标签或我认为你可以在需要重组的元素周围添加容器。如果是这样，你可以做一些像这样的通用代码。

function restructure()
{
// get all divs that needs to be restructured
let divsToRestructure = document.querySelectorAll('.default-structure');
divsToRestructure.forEach(divToRestructure => {
// do what needs to happen to restructure a div
let elements = divToRestructure.querySelectorAll('*');
let parentTag = elements[0].tagName;
// create the element that needs to contain the new structure
let newStructure = document.createElement(parentTag);
// add all old elements in the new structure
elements.forEach(element => {
if(element.tagName == parentTag){
newStructure.innerHTML += element.innerHTML;
} else{
newStructure.innerHTML += element.outerHTML;
}
newStructure.innerHTML += ' ';
})


// clear the default-structured div
divToRestructure.innerHTML = '';
// add the new structure to the div
divToRestructure.appendChild(newStructure);
divToRestructure.classList.remove('default-structure');
divToRestructure.classList.add('new-structure');
});
}

div { border: solid black 1px; }
span { font-style: italic; }

<button onclick="restructure()">Restructure</button>
<div class="default-structure">
<p>lorem ipsum</p>
<span>dolor</span>
<p>sit amen</p>
</div>
<div class="default-structure">
<h1>lorem ipsum</h1>
<span>dolor</span>
<h1>sit amen</h1>
</div>
<div class="default-structure">
<p>lorem ipsum</p>
<span>dolor</span>
<p>sit amen</p>
<span>consectetur</span>
<p>adipiscing elit</p>
</div>