为什么我的document.getElementsByClassName("obj").innerH

Question

我想用。innerhtml替换文档中的HTML，但由于某种原因它不起作用:

HTML

<div class="specs">
<div class="wrapp">
<p class="line">Content</p>
</div>
</div>

JS

document.getElementsByClassName("specs").innerHTML = "<p>Lorem ipsum</p>";

Answer 1

getElementsByClassName返回一个集合。一个也没有

有多种方法可以做到这一点:您可以在返回的项上运行for循环。

let specs = document.getElementsByClassName("specs");
for(let i = 0 ; i < specs.length;i++){
specs[i].innerHTML = "<p>Lorem ipsum</p>";
}

如果只有item，可以使用querySelector返回第一个匹配的元素。

document.querySelector(".specs").innerHTML = "<p>Lorem ipsum</p>";

Answer 2

这是一种简洁的方式

const targets = document.getElementsByClassName("specs")
if (targets.length)
for (spec in targets)
targets[spec].innerHTML = "<p>Lorem ipsum</p>";

<div class="specs">
<div class="wrapp">
<p class="line">Content</p>
</div>
</div>

Answer 3

我发现你的错误了。

document.getElementsByClassName返回具有给定类名的元素数组。所以试试这个

document.getElementsByClassName("specs")[0].innerHTML = "<p>Lorem ipsum</p>";

例如如果你有相同的两个元素类名称返回一个数组,其中包含两个元素,所以你必须得到的元素使用指定的索引数组。👍