Update text of HTMLElement without affecting child elements

Question

I want to use JavaScript/JQuery to modify the text of an HTMLElement without affecting the child HTMLElements.

I have html that looks like:

<span class="js-my-parent-span">
    "Hello, World!"
    <span class="js-my-child-span">
    </span>
</span>

I have attemted to change the Hello, World! text using the innerHTML and innerText attributes as well as the html() method from JQuery. All of these methods also overwrite the child span.

I just want to update the text.

Then update the text node and stop trying to change the content of the whole span. — Kevin B, Jun 23 '16 at 18:49
`theEl.contents().get(0).textContent = 'foo'`. or even better, `theEl[0].childNodes[0].textContent = 'foo'` — Kevin B, Jun 23 '16 at 18:55
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) — DurandA, Sep 16 '22 at 11:25

Kyle Macey · Accepted Answer · 2016-06-23T19:06:05.887

1

You could wrap the text in its own container, which is probably the best pattern here.

$('.text-content').text('Something else')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="js-my-parent-span">
    <span class="text-content">Hello, World!</span>
    <span class="js-my-child-span">Other content</span>
</span>

edited Jun 23 '16 at 19:06

answered Jun 23 '16 at 18:53

Kyle Macey

8,074
2
38
78

Good point, I feel like an idiot. This looks like a reasonable solution, I'll accept the answer if no one comes along with a more precise solution that doesn't involve modifying the html. – Blake Yarbrough Jun 23 '16 at 18:54
1

There are *ways* to do it, but I wouldn't suggest them as a solid pattern long term – Kyle Macey Jun 23 '16 at 18:55
After reviewing the answers this really is the most appropriate solution. – Blake Yarbrough Jul 05 '16 at 15:18

Mohammad · Answer 2 · 2016-06-23T19:05:51.607

1

You can get childs of span using childNodes property. childNodes[0] contain "Hello, World!" text.

$(".parent")[0].childNodes[0].nodeValue = "New hello world-";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">
    "Hello, World!"
    <span>Child text</span>
</span>

edited Jun 23 '16 at 19:05

answered Jun 23 '16 at 18:56

Mohammad

21,175
15
55
84

score 1 · Answer 3 · answered Jun 23 '16 at 18:57

You can target the first child node of the element, which is specifically the text node holding the content. However, if the span is mid-sentence, this will not work.

document.querySelector('button').onclick = function(){
  document.getElementById('test').childNodes[0].textContent = "It worked without changing "
}

<span id="test">Change this text without removing <span>what's in the span</span></span>
<button>Do It</button>

score 1 · Answer 4 · answered Jun 23 '16 at 19:02

var childs = $(".js-my-parent-span").find(".js-my-child-span");

$(".js-my-parent-span").html('"Hello, world i have successfully changed only the text and not the child element!" ').append(childs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="js-my-parent-span">
    "Hello, World!"
    <span class="js-my-child-span">This is child span
    </span>
</span>

Update text of HTMLElement without affecting child elements

4 Answers4