如果存在嵌套的输入元素，则替换标签的文本

Question

更改标签的文字似乎很简单 ：

var /**HTMLLabelElement*/ label = ...;
label.innerHTML = "...";

或者，使用jQuery ：

var /**HTMLLabelElement*/ label = ...;
$(label).text("...");

如果标签包装<input/>元素，则上述任何一种都无法正常工作：

<label><input type="checkbox">Text</label>

- 在这种情况下， <input/>元素将与旧文本一起替换。

如何更改标签的文本，而不影响其子元素？

Answer 1

过滤掉非空文本子节点并将其替换为新内容。

 $('label') // get all child nodes including text and comment .contents() // iterate and filter out elements .filter(function() { // check node is text and non-empty return this.nodeType === 3 && this.textContent.trim().length; // replace it with new text }).replaceWith('new text'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="checkbox">Text</label> 

---

纯JavaScript方法

 var label = document.querySelector('label'); // get all child nodes and update the text node from it label.childNodes[2].textContent = 'new text' // If you don't know the position // then iterate over them and update // based on the node type 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="checkbox">Text</label> 

Answer 2

使用javascript nextSibling属性选择输入的兄弟文本。

 document.querySelector('input').nextSibling.nodeValue = "newText"; 

 <label> <input type="checkbox"> Text </label>