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是一个总数。我创建了一个.total的CSS类来改变一些样式，我尝试了一些像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

不是问题的解决方法，但这消除了问题：
您可以使用last-of-type选择器在纯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>";
}

Answer 2

要定位最后一个范围并使用javascript添加该类，您可以使用选择器（例如span:last-child）来获取output中的最后一个范围，然后您就可以了使用classList.add()。
没有addClass()，这是一个jQuery方法。

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

FIDDLE

将类添加到动态创建的HTML节点

2 个答案: