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

Question

我認爲這樣做會更容易一點，但我已花了2個小時的時間完成，但無法解決問題。

我有這樣的輸出：

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

，我動態地創建JS約5跨度：

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

所以我的最後一個跨度div是一個總數。我創建了一個.total的CSS類來改變一些樣式，我嘗試了一些例如output.classList.addClass（.total）;

如何動態添加類到最後一個跨度？

這將是我的輸出：

var output = document.querySelector(".cart-contents"); 
 
var total; 
 

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

<div class="cart-contents"> 
 
\t 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

要定位的最後一個跨距，並用JavaScript添加的類別，你會使用一個選擇，像span:last-child，這裏面得到了output最後一個跨距，然後你會使用classList.add()。
沒有addClass()，這是一個jQuery方法。

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

FIDDLE

Answer 2

不針對該問題的補丁，但是這消除了問題：
爲此，您可以在純CSS，利用最後所的類型選擇器。這是最好的解決方案恕我直言。
https://developer.mozilla.org/nl/docs/Web/CSS/:last-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-child

Codepen例如：http://codepen.io/anon/pen/gMOXqK
由於這甚至不需要JavaScript和只使用CSS，無需複雜的選擇，這似乎是最好的解決辦法。

針對您的問題的可能修復程序：
您的addClassList語法不正確。
請參閱：https://developer.mozilla.org/en-US/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>"; 
}