的Javascript修改DIV類

-1

嗨，我試圖更新中的文本下面的腳本中，用下面的JavaScript代碼「提交成功」：的Javascript修改DIV類

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>

其更換文本以及按鈕類。我可以只替換文字嗎？

來源

2015-06-16 user3820288

我已經回答了這個問題您的其他問題http://stackoverflow.com/a/30845787/2025923 – Tushar

http://jsfiddle.net/b1k0qcLu/ – Kishan

只是這樣做：

的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"; 
}

這裏演示：http://jsfiddle.net/v9fmzLpx/

來源

2015-06-16 06:31:58

的問題瓦特ith更新animate-in的內部html是否在該元素內有一個不想更改的按鈕元素。

所以你需要訪問動畫的第一個孩子，其中是要更新的文本節點。

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>

還是一個更好的解決方案將是包裝在另一個元素的文本和更新元素像

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>

來源

2015-06-16 06:32:43

的Javascript修改DIV類

回答

相關問題