如何选择HTML元素<label>之间的文本

Question

考虑下面的HTML：

<label for="xxxx" id="Password_label"> 
    <div class="xxxx">Password 555</div> 
    555 
    <div class="xxx"></div> 
</label> 

我需要替换文本“555”写在第一个div下面的标签元素内。我正在尝试获取文本，但无法做到这一点。

我想：

$("#Password_label").text() 

但它返回空字符串。

Answer 1

获取与contents()和eq()帮助文本节点则更换使用replaceWith()文本。

$('#Password_label') 
 
    .contents() // get all nodes including text node 
 
    .eq(2) // get the text node 
 
    .replaceWith('newText') // replace with new content

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="xxxx" id="Password_label"> 
 
    <div class="xxxx">Password 555</div> 
 
    555 
 
    <div class="xxx"></div> 
 
</label>

---

纯JavaScript中使用childNodes让所有子节点和更新使用节点textContent属性的文本内容。

document.getElementById('Password_label') // get element by id 
 
    .childNodes[2] // get all childnodes and get text node need to update 
 
    .textContent = 'newText'; // update text content of that node

<label for="xxxx" id="Password_label"> 
 
    <div class="xxxx">Password 555</div> 
 
    555 
 
    <div class="xxx"></div> 
 
</label>

---

UPDATE：在这种情况下，一定可以通过filter()方法

$('#Password_label') 
 
    .contents() // get all nodes including text node 
 
    .filter(function() { // filterout non-empty text nodes 
 
    return this.nodeType === 3 && $.trim(this.textContent).length; 
 
    }) 
 
    .replaceWith('newText') // replace with new content

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="xxxx" id="Password_label"> 
 
    <div class="xxxx">Password 555</div> 
 
    555 
 
    <div class="xxx"></div> 
 
</label>

避免空的文本节点的问题3210