Question

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

我认为textContent只能更改TEXT

document.getElementsByTagName('label')[0].textContent = "Hello World is replaced"

然而，textContent取代了包括复选框在内的所有内容。是否有更好的方法来更改文本而不执行以下操作：

document.getElementsByTagName('label')[0].innerHTML = '<input type="checkbox" name="checkbox">Hello world is replaced';

Answer 1

您需要专门选择文本节点。

document.querySelector('label').childNodes[2].textContent = 'Hello World is replaced';

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

请注意，此处label有3个子节点：label和input之间的空格和换行符，input本身以及{{ 1}}和周围的空白。

Answer 2

您可以将文字包装在 span 标记内：

document.querySelector('label span').textContent = 'Hello World is replaced';

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            <span>Hello world</span>
    </label>
</div>

Javascript仅更改标签文本

2 个答案: