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

參見內聯注釋：

// 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/zh-CN/docs/Web/API/Document/querySelector

Answer 2

似乎正常工作。 也許您應該將腳本移到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 3

您需要刪除var cls=... 這是一個工作的jsFiddle 。

Answer 4

您可以使用文本將按鈕添加為字符串，然后獲取輸出演示 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." ）

您無法更新animate-in的內部html，因為它也會刪除button元素。

因此，一種解決方案是僅更新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>