使用 .replaceWith(textContent) 时格式丢失
Formatting lost when using .replaceWith(textContent)
我正在尝试将 div“向上”移动一个级别并删除块引用。正如您在 this fiddle 中看到的,当您单击“更改”时,粗体字体不会保留。我也尝试过使用 innerHTML 和 innerText 而不是 textContent 但都没有用。这是 HTML:
<html>
<div id="outerdiv">
<blockquote><div id="innerdiv"><b>Hello </b>Text 1</div></blockquote>
</div>
<span onclick="removeblockquotes(this)">Change</span>
</html>
和 JS:
function removeblockquotes(e)
{for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.replaceWith(b.textContent);
}
}
}
您可以将容器的 outerHTML
设置为 innerHTML
容器,从而移除容器但保留其中的标记:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.outerHTML = b.innerHTML;
}
}
<html>
<div id="outerdiv">
<blockquote>
<div id="innerdiv"><b>Hello </b>Text 1</div>
</blockquote>
</div>
另一种保留侦听器的方法,通过遍历子项并附加每个子项:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
while (b.children.length) b.insertAdjacentElement('afterend', b.children[0]);
b.remove();
}
}
<html>
<div id="outerdiv">
<blockquote>
<div id="innerdiv"><b>Hello </b>Text 1</div>
</blockquote>
</div>
我正在尝试将 div“向上”移动一个级别并删除块引用。正如您在 this fiddle 中看到的,当您单击“更改”时,粗体字体不会保留。我也尝试过使用 innerHTML 和 innerText 而不是 textContent 但都没有用。这是 HTML:
<html>
<div id="outerdiv">
<blockquote><div id="innerdiv"><b>Hello </b>Text 1</div></blockquote>
</div>
<span onclick="removeblockquotes(this)">Change</span>
</html>
和 JS:
function removeblockquotes(e)
{for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.replaceWith(b.textContent);
}
}
}
您可以将容器的 outerHTML
设置为 innerHTML
容器,从而移除容器但保留其中的标记:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.outerHTML = b.innerHTML;
}
}
<html>
<div id="outerdiv">
<blockquote>
<div id="innerdiv"><b>Hello </b>Text 1</div>
</blockquote>
</div>
另一种保留侦听器的方法,通过遍历子项并附加每个子项:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
while (b.children.length) b.insertAdjacentElement('afterend', b.children[0]);
b.remove();
}
}
<html>
<div id="outerdiv">
<blockquote>
<div id="innerdiv"><b>Hello </b>Text 1</div>
</blockquote>
</div>