update innerText without deleting child nodes

Question

I have a div with some text and a child div. I want to update the outer div text and keep the child div.

<div class="outer">
  some text here
<div class="arrow-down"></div>
</div>

if I try outer.innerText = "foo" the arrow-down element is deleted. How can I get around this?

Thanks

Put your text in an element, e.g. a span and then edit that? — DBS, Dec 13 '17 at 16:36
Use a `span` element as the first child of the outer div, assign an ID to it and target that span element when updating the text. — Luke Stoward, Dec 13 '17 at 16:36
Your arrow down Div is not inside the outer div in your example - thus is not in a parent-child relationship in the context that you have provided — Reed, Dec 13 '17 at 16:39
Seems something is missing. Are you using "outer" anywhere else? Is the div with the "outer" class all that remains when you use outer.innerText and arrow-down is deleted? — tree, Dec 13 '17 at 16:41

score 2 · Answer 1 · edited Dec 13 '17 at 17:05

2

Create a child element such as a span element and place the text you want change inside that.

Then you can update that via JavaScript like so:

var el = document.getElementById('inner');
el.innerText = 'some different text';

<div class="outer">
  <span id="inner">some text here</span>
  <div class="arrow-down"></div>
</div>

edited Dec 13 '17 at 17:05

Andrew Lohr

answered Dec 13 '17 at 16:40

Luke Stoward

thanks, I'll do this as it appears to be the only option – jj1111 Dec 13 '17 at 16:48
It isn’t necessarily the only option. For example, you could also parse the HTML out of the div’s innerHTML property and swap in your new text using regular expressions... but that would be more difficult and less flexible. Using the additional span to compartmentalize your text is always BETTER because it opens you up to more options, such as unique styles between the span and its sibling tags. – Dom Ramirez Dec 13 '17 at 20:34
This should answer your question maybe... https://stackoverflow.com/a/4106910/1108235 – Ashish Apr 08 '21 at 19:53

1 Answers1