Replacing text within a label

Question

I have a HTML which looks like:

I want to replace the word Search: with another word some word. How can I do this? I tried:

document.querySelector("#state-covid-data_filter label").innerText = "some word"

but this also replaces the input tag.

I also tried:

document.querySelector("#state-covid-data_filter label").innerHTML = document.querySelector("#state-covid-data_filter label").innerHTML.replace("Search:","Some word:")

But then the input tag loses the events registered. How could I just replace the text such that everything else remains fine.

Wrap it in a ``. (If you cannot change the HTML, get the textNode child and change that) — , Jul 22 '20 at 08:24
Does this answer your question? [How can I change an element's text without changing its child elements?](https://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements) — Liam, Jul 22 '20 at 08:24

score 1 · Answer 1 · answered Jul 22 '20 at 08:29

You can get the text node by childNodes.

If the text is always at the beginning of the element, you can just change it like this:

document.querySelector('label').childNodes[0].textContent = 'Some word:';

<label>
  Search:
  <input type="text" />
</label>

score 0 · Answer 2 · answered Jul 22 '20 at 08:37

A workaround would be to redraw the label, it would account for the scenarios when your label may not have any text content to begin with, or when it's placed after the input

const label = document.querySelector("label");
const input = label.querySelector("input");
label.innerHTML = "NEW STRING";
label.append(input);

score -2 · Answer 3 · answered Jul 22 '20 at 08:25

-2

Because your input is inside your label it is also part of the innerText you can add a element around the text and select that instead like this

document.querySelector("#your_id label span").innerText = "some word";

<div id="your_id">
  <label for="">
    <span>Your text</span>
    <input type="search">
  </label>
</div>

answered Jul 22 '20 at 08:25

Nico Shultz

1,872
1
9
23

You could, but you don't have to – Liam Jul 22 '20 at 08:28

Replacing text within a label

3 Answers3