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';

追加东西

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")

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);

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

2 个答案: