javascript - 如何使用 innerHTML/innerText 将内容 append 到 querySelectorAll 元素？

Question

我目前有我的类元素:

var frame_2 = document.querySelectorAll(".name");

目前这个 div 是空的。我现在想向那个 div “追加/添加”一些内容 - 我尝试使用 innerHTML + innerText 但由于某种原因似乎没有添加任何内容。

示例:

frame_2.innerHTML = '<img src="image.gif" />';

和

frame_2.innerText = 'some text';

有什么建议吗？我不确定是否有方法可以做同样的事情 - 或者性能更好？

Answer 1

这为您提供了包含类名的元素列表

var name=document.querySelectorAll(".name");

你想要第一个元素吗？

name[0].textContent='some text';

这给了你一个元素，第一个。

var name=document.querySelector(".name");
name.textContent='some text';

append 东西

name.appendChild(document.createTextNode('pizza'));
name.appendChild(document.createElement('div')).textContent='spaghetti';
name.appendChild(document.createElement('img')).src='cookie.jpg';

编辑

要通过类名获取元素，然后检索 id :

var names=document.querySelectorAll(".name"),l;
while(l--){
console.log(names[l].id);
}

或者如果我没有理解正确

html

<div class="spaghetti" id="pizza"></div>

js

document.querySelector(".spaghetti#pizza")

EDIT2

html

<div id="container1"><div class="my-class"></div></div>

js

document.querySelector("#container1>.my-class")