Question

使用原生JavaScript我需要将None下面的文字更改为Black

我知道使用Jquery或其他库会很容易，但在这个项目中我不能使用它们，有人可以帮我做这个吗？

<li>
  <input type="radio" id="options_82" class="radio product-custom-option" name="options[82]">
  <span class="label">
    <label for="options_82">None</label>
  </span>
</li>

Answer 1

使用querySelector，getElementById等获取元素，然后使用'Black'或textContent属性将其设置为innerHTML。除非您实际设置HTML，否则使用textContent是最佳做法。

Demo

document.querySelector('label[for="options_82"]').textContent = 'Black';

使用ID的更复杂的选择器可能比上面更快：

Demo

document.querySelector('#options_82 + .label label').textContent = 'Black';

Answer 2

假设您需要匹配for属性（您的html结构看起来可能不止一个），您可以使用getElementsByTagName来获取标签，然后循环比较它们for属性。

function getLabel(for) {
    var labels = document.getElementsByTagName('label');
    for (var i = 0, c = labels.length; i < c; i++) {
        if (labels[i].getAttribute('for') === for) {
            return labels[i];
        }
    }
}

然后，您可以修改元素的innerHTML值。

var label = getLabel('forvalue');
if (label) {
    label.innerHTML = 'new text';
}

使用本机JavaScript更改子元素的文本

2 个答案: