如何合并三個html元素

說我有以下結構：

<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

uj5u.com熱心網友回復：

此解決方案可用于任意數量的元素，元素將與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>

uj5u.com熱心網友回復：

你可以試試這個代碼。

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

uj5u.com熱心網友回復：

你可以這樣做：

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。

uj5u.com熱心網友回復：

因此，它可能是標簽<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.appendChild(element);
        }
        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>

標籤：javascript网页格式

上一篇：呈現過去12個月的資料模板

下一篇：使用Javascript按鈕更改ul的文本顏色