如何在innerHTML中插入子元素

Question

我有一个缓冲区：

var buff="<div id='main'><p id='foo'>Hello World</p></div>"; 
var mydiv = document.createElement("div");
mydiv.innerHTML = buff; 
// Don't document.write mydiv, but do the operation below
mydiv.getElementById("foo").innerText = "Hi there!"; 

目前无法正常工作，我该怎么办？

Answer 1

每个元素没有getElementById，因为ID都是唯一的。您可以使用querySelector / querySelectorAll进行元素范围的查询，或使用document.getElementById通过ID搜索文档

您可以使用mydiv.querySelector('#foo')要么document.getElementById('foo')

Answer 2

对象mydiv没有属性函数getElementById。

您需要创建buff变量，如下所示：

var buff="<div id='main'><p id='foo' class='bar'>Hello World</p></div>";

然后将foo的内部文本更改为：

mydiv.getElementsByClassName("bar")[0].innerText = "Hi there!"

希望获得帮助！