如何使用innerHTML/innerText向querySelectorAll元素添加内容？

Question

我目前有一个类元素：

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

目前这个 div 是空的。我现在想要向这个 div 添加一些内容 - 我尝试使用 innerHTML 和 innerText，但出于某种原因似乎没有添加任何内容。

示例：

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

并且

frame_2.innerText = 'some text';

有什么建议吗？我不确定是否有相同的方法 - 或者在性能方面是否有更好的选择？

- user1231561

---

document.querySelectorAll(".name")[0] -> 您将获得一个列表并想要第一个项目。 - cocco

Answer 1

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

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

你要获取第一个元素吗？

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

这将为您提供一个单一的元素，第一个元素。

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

要追加东西

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>

JavaScript

document.querySelector(".spaghetti#pizza")

编辑2

HTML

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

js

->

JavaScript

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

- cocco

---

嗨cocco，非常感谢你的回答。 对于单个元素选择器：document.querySelector(".name"); - 是否可以更精确地引用它 - 比如说我有一个类名为.name的元素，分别在两个不同的容器内，一个容器的id叫做：“name-container-1”，另一个叫做“name-container-2”？ - user1231561

你想通过id获取一个元素吗？ - cocco

不，我想通过类名获取它，但我想针对特定ID容器内的类名。 - user1231561

我添加了一个脚本，可以让你获取每个元素的独立ID。 - cocco

抱歉没有表述清楚 - 场景是：<div id="container1"><div class="my-class"></div></div> - user1231561

Answer 2

更简便的解决方案，适用于任何情况。查询您的选择器：

let find = document.querySelector('.selector');

创建一些HTML字符串。

let html = `put your html here`;

从字符串创建元素

  let div = document.createElement('div');
  div.innerHTML = html;

将你创建的新html追加到选择器中

find.appendChild(div);

- chris_r