How do I replace text without using innerHTML?

Question

Supposed I have a node that looks like this

<a>
  <span class="glyphicons glyphicons-collapse"></span>Collapse All
</a>

And I want to toggle it to this

<a>
  <span class="glyphicons glyphicons-expand"></span>Expand All
</a>

If I use innerHTML or innerText or textContent it just replaces the text. My first pass at a solution is

function toggleLastTextNode(element, textWhenTrue, textWhenFalse, value) {
  element.removeChild(obj.childNodes[1]);
  element.insertAdjacentHTML("beforeend", value ? textWhenTrue: textWhenFalse);
}

As I know where the text is, it's always the obj.childNodes[1] so I just remove it and replace it. The function call would be something like this

toggleLastTextNode(element,"Expand","Collapse",true)

With the current HTML is there a better way to do this? I want to avoid innerHTML if I can.

If you're not dealing with several languages, a CSS pseudo-element ::before or ::after might also do the trick, leaving that semantically useless text out of your HTML — Laurent S.
– Laurent S., Commented May 6, 2015 at 12:26
Thanks for the tip that looks like a nicer solution, I guess something like a css3 toggle switch? — Matt McCabe
– Matt McCabe, Commented May 6, 2015 at 12:39
I made it an answer as an alternative. Working through the classes has the advantage of letting you switch text and image/whatever style at the same time, while the other way you need to address those changes in several instructions. I made it in jQuery for quick response, but it can also be done in vanillaJS — Laurent S.
– Laurent S., Commented May 6, 2015 at 12:44

Viraj Nalawade · Accepted Answer · 2015-05-06 12:24:15Z

6

How about

document.getElementById('elementid').firstChild.nodeValue = new_text;

innerHTML has side effects (like disconnecting existing DOM nodes and rerendering that might be heavy).

answered May 6, 2015 at 12:24

Viraj Nalawade

3,2353 gold badges32 silver badges44 bronze badges

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

1 Comment

Matt McCabe Over a year ago

Very nice, that's exactly what I was looking for and that's why I was trying to avoid innerHTML, thanks!

Laurent S. · Accepted Answer · 2015-05-06 12:41:28Z

2

Nowadays when I'm confronted with this kind of functionality I always try to look at semantic, removing everything which is not content. In this case, you could leave the text in the CSS as it is kinda part of the UX/UI rather than content (a screen reader shouldn't "read" this for example, Google search bot neither, it can't do anything useful with that content). In your case, not changing the HTML (that might also probably be shortened, I come to a solution like this :

HTML (almost same as yours, added href attribute) :

<a href="#">
  <span class="glyphicons glyphicons-collapse"></span>
</a>

CSS :

.glyphicons-collapse::after{content: 'Collapse All'}
.glyphicons-expand::after{content: 'Expand All'}

JS (jquery) :

$('a').on('click','.glyphicons-collapse',function(e){
    e.preventDefault();
    $(this).removeClass('glyphicons-collapse');
     $(this).addClass('glyphicons-expand');
});

$('a').on('click','.glyphicons-expand',function(e){
     e.preventDefault();
    $(this).removeClass('glyphicons-expand');
     $(this).addClass('glyphicons-collapse');
});

And the fiddle with all that in it

answered May 6, 2015 at 12:41

Laurent S.

6,9373 gold badges32 silver badges42 bronze badges

1 Comment

Matt McCabe Over a year ago

Thanks, I've taken this approach (for the css) even though I accepted the other answer. I'm using function that uses classList.toggle and considering a shim to so I can use the version that allows a second parameter.

Sunil B N · Accepted Answer · 2015-05-06 12:44:19Z

2

define your html content with id

<a id="glyphicons">
  <span class="glyphicons glyphicons-collapse"></span>Collapse All
</a>

then toggleExpandCollapse()

var toggleExpandCollapse = function () {
    var oElements = document.getElementById('glyphicons').childNodes;
    if (oElements[1].className === "glyphicons glyphicons-collapse") {
        oElements.childNodes[2].nodeValue = "Expand All";
        oElements[1].className = "glyphicons glyphicons-expand"
    } else {
        oElements.childNodes[2].nodeValue = "Collapse All";
        oElements[1].className = "glyphicons glyphicons-collapse"
    }
}

answered May 6, 2015 at 12:44

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

Collectives™ on Stack Overflow

How do I replace text without using innerHTML?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related