Replace text inside HTML leaving other HTML intact with vanilla javascript

Question

I'm trying to write pure javascript function to replace the text "Passed" to "Completed". The HTML inside the div#prompt should remain in tact and is variable. Here is the HTML -

<div id="prompt">
  Passed
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

I tried replacing text but that doesn't seem to be working

var text = document.getElementById('prompt').textContent; 
text.replace("Passed", "Completed");

Also tried this -

var text = document.getElementById('prompt').innerHTML;
text.replace("Passed", "Completed");

What am I doing wrong? Appreciate the help!

Possible duplicate of How do I replace text inside a div element? — Heretic Monkey
– Heretic Monkey, Commented Mar 13, 2018 at 15:04

Jonas Wilms · Accepted Answer · 2018-03-13 15:00:35Z

4

replace does not mutate the string, it returns a new one. Strings are immutable.

 var text = document.getElementById('prompt');
 text.textContent = text.textContent.replace("Passed", "Completed");

Actually your element contains a text node that you can override:

 document.getElementById('prompt').childNodes[0].textContent = "Completed";

answered Mar 13, 2018 at 15:00

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Asons · Accepted Answer · 2018-03-13 15:11:46Z

1

Instead of replacing text, how about toggle a class on the outer div.

With that you can also customize its HTML as well.

Stack snippet

.prompt::before {
  content: 'Passed';
}
.prompt.hidden::before {
  content: 'Completed';
}
.prompt.hidden button {
  display: none;
}

/* demo styles */
.prompt button { padding: 5px 20px; }
hr { margin: 20px 0; }

<div class="prompt">
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

<hr>

<div class="prompt hidden">  
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

answered Mar 13, 2018 at 15:11

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Collectives™ on Stack Overflow

Replace text inside HTML leaving other HTML intact with vanilla javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related