Javascript modify the text inside the div class [duplicate]

Question

Hi I am trying to update the " Your submission was successful."of following script, with following javascript code :

var cls = document.getElementById("global-alert-queue").getElementsByClassName("animate-in")[0].innerHTML = "Change Text";

<div id="global-alert-queue" class="layout-wrapper">
  <div class="alert success animate-in" role="alert">
    Your submission was successful.
    <button id="dismiss-alert" class="dismiss" type="button"></button>
  </div>
</div>

Its replacing the text along with button class. Can i replace only the text ?

I've already answered this on your other question stackoverflow.com/a/30845787/2025923 — Tushar
– Tushar, Commented Jun 16, 2015 at 6:32

Arun P Johny · Accepted Answer · 2015-06-16 06:32:43Z

The problem with updating inner html of animate-in is there is a button element inside that element which you don't want to change.

So you need to access the first child of animate-in which is the text node to be updated.

document.querySelector("#global-alert-queue .animate-in").firstChild.nodeValue = "Change Text";

<div id="global-alert-queue" class="layout-wrapper">
  <div class="alert success animate-in" role="alert">
    Your submission was successful.
    <button id="dismiss-alert" class="dismiss" type="button"></button>
  </div>
</div>

Or a better solution will be to wrap the text in another element and update that element like

document.querySelector("#global-alert-queue .animate-in > span").innerHTML = "Change Text";

<div id="global-alert-queue" class="layout-wrapper">
  <div class="alert success animate-in" role="alert">
    <span>Your submission was successful.</span>
    <button id="dismiss-alert" class="dismiss" type="button"></button>
  </div>
</div>

Radonirina Maminiaina · Accepted Answer · 2015-06-16 06:39:33Z

2

Just do this:

Html

<div id="global-alert-queue" class="layout-wrapper">
    <div class="alert success animate-in" role="alert">
        Your submission was successful.
        <button id="dismiss-alert" class="dismiss" type="button" onClick="changeText()">Change</button>
    </div>
</div>

Javascript

function changeText() {
    document.getElementsByClassName("animate-in")[0].firstChild.nodeValue = "Change Text";
}

Here the demo: http://jsfiddle.net/v9fmzLpx/

edited Jun 16, 2015 at 6:39

answered Jun 16, 2015 at 6:31

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Collectives™ on Stack Overflow

Javascript modify the text inside the div class [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related