Изменить текст дочернего элемента с использованием родной JavaScript

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 свойствами. Лучше всего использовать textContent, если вы на самом деле не устанавливаете HTML.

Demo

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

Более сложный селектор с использованием идентификатора может быть быстрее, чем выше:

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'; 
}