如何使用 innerHTML/innerText 将内容附加到 querySelectorAll 元素？

Posted 2023-03-11

【中文标题】如何使用 innerHTML/innerText 将内容附加到 querySelectorAll 元素？

【英文标题】：How to append content to querySelectorAll element with innerHTML/innerText?

【发布时间】：2014-01-14 14:37:48

【问题描述】：

我目前有我的类元素：

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

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

示例：

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

和

frame_2.innerText = 'some text';

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

【问题讨论】：

document.querySelectorAll(".name")[0] -> 你得到一个列表并想要第一个项目

【参考方案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>

js

document.querySelector(".spaghetti#pizza")

EDIT2

html

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

js

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

【讨论】：

嗨，cocco，非常感谢您的回答。对于单元素选择器： document.querySelector(".name"); - 是否可以更精确地引用它 - 就像想象我在两个不同的容器中有 class .name，一个名为：“name-container-1”，另一个名为“name-container-2”

你想通过id获取元素吗？

不。我想通过类名获取它，但我想在特定的 id 容器中定位类名

我添加了一个关于如何获取每个元素的单独 id 的脚本。

抱歉不准确 - 场景是：

【参考方案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);