我想使用 outerHTML 將 HTML 元素“拆分”為三個部分。不幸的是，使用 outerHTML 關閉標簽不能按預期作業（參見下面的示例）。如果有人知道我如何達到預期的效果，將不勝感激。
var content = document.querySelector('.content');
var splitter = document.querySelector('.splitter');
var result = document.querySelector('.result');
splitter.outerHTML = '</span>' splitter.outerHTML '<span >';
result.innerText = content.innerHTML;<div class="content">
<span class="wrapper">Hello <span class="splitter">w</span>orld!</span>
</div>
<hr>
Result: <div class="result"></div>
<hr>
Expected: <div><span class="wrapper">Hello </span><span class="splitter">w</span><span class="wrapper">orld!</span></div>uj5u.com熱心網友回復：
var content = document.querySelector('.content');
var splitter = document.querySelector('.splitter');
var result = document.querySelector('.result');
var chuncks = content.innerHTML.split(`${splitter.outerHTML}`);
content.innerHTML = chuncks[0] '</span>' splitter.outerHTML '<span >' chuncks[1];
result.innerText = content.innerHTML;<div class="content">
<span class="wrapper">Hello <span class="splitter">w</span>orld!</span>
</div>
<hr>
Result: <div class="result"></div>
<hr>
Expected: <div><span class="wrapper">Hello </span><span class="splitter">w</span><span class="wrapper">orld!</span></div>uj5u.com熱心網友回復：
這是一個使用 DOM 方法創建元素的解決方案，而不是使用innerHTML：
const content = document.querySelector('.content');
const wrapper = document.querySelector('.wrapper');
for (const node of [...wrapper.childNodes]) {
if (node.classList?.contains("splitter")) {
content.appendChild(node);
} else if (node.textContent.trim()) {
const span = wrapper.cloneNode();
span.appendChild(node);
content.appendChild(span);
}
}
wrapper.remove();
// Verification
console.log(content.innerHTML);<div class="content">
<span class="wrapper">Hello <span class="splitter">w</span>orld!</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522747.html