Javascript change label text only

Question

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

I thought textContent would be able to just change the TEXT

document.getElementsByTagName('label')[0].textContent = "Hello World is replaced"

However, textContent replaces everything including checkbox. Is there a better way to just change text without doing something like below:

document.getElementsByTagName('label')[0].innerHTML = '<input type="checkbox" name="checkbox">Hello world is replaced';

Get the textNode child of the label and change it.

Barmar
– Barmar

2018-05-24 03:57:01 +00:00
Commented May 24, 2018 at 3:57 — Barmar
– Barmar, Commented May 24, 2018 at 3:57

CertainPerformance · Accepted Answer · 2018-05-24 03:57:12Z

3

You'll need to select the text node specifically.

document.querySelector('label').childNodes[2].textContent = 'Hello World is replaced';

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

Note that you have 3 child nodes of the label here: the whitespace and newline between the label and the input, the input itself, and the Hello world and surrounding whitespace.

answered May 24, 2018 at 3:57

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lam Pham · Accepted Answer · 2018-05-24 04:25:10Z

0

You can wrap the text inside a span tag:

document.querySelector('label span').textContent = 'Hello World is replaced';

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            <span>Hello world</span>
    </label>
</div>

answered May 24, 2018 at 4:25

Lam Pham

585 bronze badges

Collectives™ on Stack Overflow

Javascript change label text only

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related