Добавить класс в динамически созданный узел HTML

Question

Я думал, что это будет немного легче сделать, но я потратил на это 2 часа, не имея возможности понять это.

У меня есть этот выход:

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

и я динамически создавать около 5 пролетов с JS:

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

так мой последний диапазон div - это итог. Я создал класс 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, используя last- селектор типа. Это лучшее решение IMHO.
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>"; 
}