如何在我在 javascript 中使用 DOM 创建的元素中使用 InnerHTML 添加内容答案

【问题标题】：How to add contents using InnerHTML inside of an element i created using DOM in javascript如何在我在 javascript 中使用 DOM 创建的元素中使用 InnerHTML 添加内容
【发布时间】：2021-07-02 22:14:50
【问题描述】：

大家好，所以我使用 Javascript 制作了一个 DOM 标签，并给它一个 ID，如下所示：

让 Tagger = document.createElement('h3');

Tagger.id = '游戏';

这样做后，我尝试通过以下方式为标记器提供内容：

document.getElementById(Tagger).innerHTML = "Hello World";

当我 console.log 页面时，它给了我以下错误：

未捕获的类型错误：document.getElementById(...) 为空

因此，我尝试使用 id 名称而不是使用 Tagger 变量，但它起作用了。这就是我所做的： document.getElementById("Game").innerHTML = "Hello World";

5）问题是我不想直接使用 id 但我想使用名为 Tagger 的变量名，我的第一种方法可能有什么问题？

【问题讨论】：

document.getElementById 接受一个字符串。 Tagger 是一个元素。您无法在文档中查询尚未添加的元素，尤其是对于已创建的元素，这是没有意义的。只需执行Tagger.innerHTML = "Hello World"。 document.getElementById(Tagger) 与document.getElementById(String(Tagger)) 相同，即document.getElementById("[object HTMLHeadingElement]")。请记住，Tagger.id 是 "Game"； Tagger 不是 "Game"。
另外，您可能不需要 ID。对于标题，它对于 URL 中的片段标识符很有用。但是创建元素不需要ID。更紧凑的代码版本（加上最佳实践）：const tagger = Object.assign(document.createElement("h3"), { innerHTML: "Hello World" }).

标签： javascript html dom innerhtml

【解决方案1】：

Tagger 是对创建的元素对象的引用，而不是它的 id。

只需像设置 ID 一样设置内容

let Tagger = document.createElement('h3');

Tagger.id = 'Game';

Tagger.innerHTML = 'Hello World';

document.body.append(Tagger)

【讨论】：

现在我想使用名为 Tagger 的变量名将 CSS 添加到该 H3 元素，我该怎么做？我试过： document.getElementById(Tagger).style.color = "blue";它没有工作

【解决方案2】：

let Tagger = document.createElement('h1');
Tagger.id = 'h1Title';
Tagger.innerHTML = 'Hello World';

// First you need Insert in the document to found in document
document.body.append(Tagger)

//After inserted in the document, is possible to found
let h1 = document.getElementById("h1Title");
h1.innerHTML = 'Hello World 2 - The Revenge';

【讨论】：

如果您已经拥有该元素的引用，为什么还需要在 DOM 中使用 getElementById() 查询它
我创建它只是为了解释它是如何工作的，仅此而已。它没有真正的意义，但它可以作为一种解释。