Javascript innerHTML не получает обновленный

Question

Привет Я пытаюсь обновить innerHTML из следующих скрипт

<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>

Я попытался следующие

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

Но его не работает.

Answer 1

похоже, что он работает правильно. Возможно, вы должны переместить свой скрипт под HTML. или проверить готовность документа.

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>

Answer 2

Вы должны удалить var cls=.... Вот работающий jsFiddle.

Answer 3

Смотрите комментарии инлайн:

// Run when document is completely rendered and is ready to be manipulated 
document.addEventListener("DOMContentLoaded", function() { 
    document.querySelector("#global-alert-queue .animate-in").innerHTML = "Change Text"; 
}); 

Демо: http://jsfiddle.net/tusharj/kg3cc4gw/3/

querySelector

Возвращает первый элемент в пределах документа (используя глубину первого предзаказа обхода узлы документа), которые соответствуют указанной группе селекторов.

Подробнее о querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 4

вы можете добавить кнопку в виде строки с текстом, то вы получите ваш выход Demo Html

function changeText() { 
 

 
    var cls = document.getElementById("global-alert-queue").getElementsByClassName("animate-in")[0].innerHTML = 'Change Text <button id="dismiss-alert" class="dismiss" type="button" onclick="changeText()">Change</button>'; 
 
}

<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>

Answer 5

В соответствии с обновленным требованиям (Expected is "Change Text" should replace "Your submission was successful.")

Вы не можете обновить внутренний html animate-in, так как он также удалит элемент кнопки.

Так одно решение будет является обновление только первого ребенка animate-in который является текстовый узел, содержащий значение как

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

Другой способ обновить разметку, чтобы обернуть текст в другом элементе, как

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>