从标签中修剪空白而不删除 <input> 内部答案

【问题标题】：Trim white space from label without removing inside <input>从标签中修剪空白而不删除 <input> 内部
【发布时间】：2016-06-06 03:37:25
【问题描述】：

我的html：

<div class="product-addon product-addon-extra-tip">
    <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2"> 2 </label>
    </p>
    <p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5"> 5 </label>
    </p>
</div>

您可以看到标签在数字的两侧都有空格。我的 javascript 旨在仅修剪那个空白，但它也消除了整个 input 标记。

var labels = document.querySelectorAll("div.product-addon label");
for (var i = 0; i < labels.length; i++) {
  labels[i].textContent = labels[i].textContent.trim();
}

innerText 和 innerHTML 不能代替 textContent。我做错了什么？

【问题讨论】：

来自 textContent 的文档：“在节点上设置此属性 [textContent] 会删除其所有子节点，并将它们替换为具有给定值的单个文本节点。”

标签： javascript innerhtml innertext

【解决方案1】：

textContent、innerText、innerHTML，它们都将内容替换为您分配的任何值，因此删除了输入。

您应该做的是遍历子节点，仅过滤掉文本节点，并仅修剪那些内容。

var labels = document.querySelectorAll("div.product-addon label");
for (var i = 0; i < labels.length; i++) {
    var children = labels[i].childNodes;
	
    for (var j = 0; j < children.length; j++) {
    	if ( children[j].nodeType === 3 ) 
        	children[j].nodeValue = children[j].nodeValue.trim();
    }
}

<div class="product-addon product-addon-extra-tip">
    <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2"> 2 </label>
    </p>
    <p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
        <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5"> 5 </label>
    </p>
</div>

【讨论】：