CODEWITHSUNDEEP
javascript
JasonDavis
JasonDavis

Reputation: 48983

Change text of a child element using native JavaScript

Using native JavaScript I need to change the text below that is None to Black

I know this would be easy with Jquery or other libraries but in this project I cannot use them, can someone help me to do this please?

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

Upvotes: 0

Views: 848

Answers (2)

kbjr
kbjr

Reputation: 1254

Assuming you need to match for the for attribute (your html structure looks like you probably have more than one of these) you can use getElementsByTagName to fetch your labels, and then loop through them comparing the for attribute.

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

Then, you can edit the element's innerHTML value.

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

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50269

Get the element using querySelector, getElementById, etc. and then set it to 'Black' using either the textContent or innerHTML properties. It's best practice to use textContent unless you're actually setting HTML.

Demo

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

A more complex selector using the ID may be faster than the above:

Demo

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

Upvotes: 2

Related Questions