如何在不干扰其他子节点的情况下替换 HTML 节点中的文本

Question

我的结构是：

<th>0.12345<div id="someDiv"></div></th>

我需要用其他文本替换 0.123456，而不删除div。使用 innerHTML 和 innerText 会杀死所有内容。

我知道我可以使用substr()先剪切内部 HTML，然后重建完整的内容，但有最简单的方法吗？

Answer 1

您需要

选择TextNode对象并重置其nodeValue。现在该怎么做。你可以从div 开始，因为你知道它是 id。然后你可以得到带有previousSibling属性的textNode。

像这样：

document.querySelector('#someDiv').previousSibling.nodeValue = 'TEST'

<table>
    <tr>
        <th>0.12345 <div id="someDiv">div</div></th>
    </tr>
</table>

UPD。如果要在div 之前插入新的文本节点并支持这两种方案，您可以这样做：

var div = document.querySelector('#someDiv');
if (div.previousSibling) {
    div.previousSibling.nodeValue = 'TEST1';
}
else {
    div.insertAdjacentHTML('beforebegin', 'TEST2');
    // or if you want verbose
    // div.parentNode.insertBefore(document.createTextNode('TEST2'), div);
}

Answer 2

var th = document.getElementsByTagName('th')[0];
th.childNodes[0].textContent = "foo";

<table><th>0.12345<div id="someDiv">somediv</div></th></table>

不幸的是，jQuery并没有提供对文本节点的大力支持，所以你应该使用childNodes或XPath手动抓取它。

Answer 3

我会将您需要的内容包装在一个 span 标签中，并为简单起见直接对其进行操作。

.html：

<th>
    <span class="myValue">0.12345</span> 
    <div id="someDiv">div</div>
</th>

.js：

$(".myValue").html("XXX");