我的 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 旨在仅 trim 该空白,但它也消除了整个 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
、innerText
、innerHTML
,它们都将内容替换为您分配的任何值,因此输入被删除。
您应该做的是遍历子节点,仅过滤掉文本节点,并仅 trim 这些节点的内容。
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>
关于javascript - trim 标签中的空白而不删除内部 <input>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35592125/