My 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
、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>