將類添加到動態創建的HTML節點

Question

我以為這樣做會容易一些，但是我花了2個小時在上面，卻無法弄清楚。

我有這個輸出：

 <div class="cart-contents"> Your shopping cart is empty </div> 

我用JS動態創建了大約5個跨度：

 function outputValue(value){ //output.innerHTML = output.innerHTML + value; output.innerHTML += "<br>" + "<span>" + value + "</span>"; } 

所以我最后一個跨度div是總計 我創建了一個CSS類.total來更改一些樣式，我嘗試了一些諸如output.classList.addClass（.total）;之類的事情。

如何動態地向最后一個跨度添加類？

這將是我的輸出：

 var output = document.querySelector(".cart-contents"); var total; function outputValue(value){ //output.innerHTML = output.innerHTML + value; output.innerHTML += "<br>" + "<span>" + value + "</span>"; } 

 <div class="cart-contents"> Your shopping cart is empty //<span>would go here</span> //<span>would go here</span> //<span>would go here</span> //<span>would go here</span> //<span class="total">would go here</span> </div> 

Answer 1

不能解決問題，但是可以解決此問題：
您可以使用最后一個選擇器在純CSS中完成此操作。 這是恕我直言的最佳解決方案。
https://developer.mozilla.org/nl/docs/Web/CSS/:last-of-type
https://developer.mozilla.org/zh-CN/docs/Web/CSS/%3Alast-child

Codepen示例： http ：//codepen.io/anon/pen/gMOXqK
由於這甚至不需要JavaScript，並且僅使用CSS而沒有復雜的選擇器，因此這似乎是最好的解決方案。

解決您的問題的方法：
您的addClassList語法不正確。
請參閱： https ： //developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

output.classList.add("total"); 

這是正確的addClass語法。

有什么理由要使用JavaScript添加類，而不是立即添加？ 如果您傳遞一個（可選）類參數，則可以在添加總計時傳遞該類（假設您知道添加總計的時間）。

function outputValue(value){
    outputValue(value,"");
}

function outputValue(value, class){
    output.innerHTML += "<br>" + "<span class='" + class + "'>" + value + "</span>";
}

Answer 2

要定位最后一個跨度並使用javascript添加類，您可以使用選擇器，例如span:last-child ，該選擇器將在output中獲取最后一個跨度，然后使用classList.add() 。
沒有addClass() ，這是一個jQuery方法。

output.querySelector('span:last-child').classList.add('total')

小提琴