如何为新创建的HTML元素分配ID？

Question

编辑：在NetBeans中使用此代码：

var ele = document.createElement("div");
ele.id = 'tempId1';
ele.innerHTML = "TEST";
document.querySelector("body").append(ele);
document.getElementById("tempId1").innerHTML= "TEST2";

给我错误：

TypeError: undefined is not a function (evaluating     'document.querySelector("body").append(ele)') (13:47:52:032 | error, javascript)
at global code (public_html/index.html:34:42)

追加null之前（13：47：52：036）

和此代码：

  var newElement = document.createElement("DIV");
newElement.setAttribute("id", "uniqueIdentifier");
console.log("before appending" +  document.getElementById("uniqueIdentifier"));
document.body.append(newElement);
console.log("after appending" + document.getElementById("uniqueIdentifier"));
document.getElementById("uniqueIdentifier").innerHTML = "hello";

给我错误：

TypeError: undefined is not a function (evaluating 'document.body.append(newElement)') (13:47:52:037 | error, javascript)
at global code (public_html/index.html:51:21)

该代码似乎可以在Chrome中执行，但不能在NetBeans Embedded Webkit浏览器中执行。 我现在想知道现在是否还有其他问题，但是至少我可以使它工作。 谢谢大家

---

原文：（我在编程方面很不好。）

我正在尝试创建一个新的HTML元素，为其分配一个新的ID，然后调用该ID并通过使用.innerHTML将一个字符串放入其中来输出某些内容。

如果我用

var newElement = document.createElement("DIV");

然后：

document.newElement.id = "newId";

要么：

newElement.setAttribute("id", "uniqueIdentifier");

然后尝试分配文本并使用new元素输出该文本：

document.getElementById("uniqueIdentifier").innerHTML = "TEST OUTPUT";

那什么也没发生

我已经尝试了许多配置，但是我永远都不会使用新ID输出任何内容。

我还复制并粘贴了一些人说可以为新生成的对象分配ID的代码，但是我永远无法使用新ID输出任何内容。

这是我复制的示例：

var ele = document.createElement('div');
var id = 'temp1';
ele.setAttribute('id', id);

为此，我添加了另一行：

document.getElementById("temp1").innerHTML = "TEST";

无法输出任何东西。

我尝试过的另一个代码示例：

var el = document.createElement('div'), 
staticPart = 'myUniqeId',
i = 0; 
el.id = staticPart + i; 
el.getAttribute('id'); 
el.id; 

我再次添加了

document.getElementById("myUniqeId0").innerHTML = "OUTPUT TEST";

不起作用 我已经被困了几天了。 提前致谢。

Answer 1

您可以直接使用设置元素的内部html。

    ele.id = 'temp1';
    ele.innerHTML = "TEST";

然后要查看页面上的输出，您需要将此元素附加到html的某些现有元素中。 在这里，它被附加到html主体。

 var ele = document.createElement('div'); ele.id = 'temp1'; ele.innerHTML = "TEST"; document.querySelector("body").append(ele); 

Answer 2

创建元素之后，可以使用setAttribute设置id，然后将其附加到主体，然后尝试设置其内容

如果您没有将其附加到正文上并尝试以document.getElementById（“ uniqueIdentifier”）的形式搜索dom，则将返回null，因此这就是您无法看到内容的原因

检查此片段

 var newElement = document.createElement("DIV"); newElement.setAttribute("id", "uniqueIdentifier"); console.log("before appending" + document.getElementById("uniqueIdentifier")); document.body.append(newElement); console.log("after appending" + document.getElementById("uniqueIdentifier")); document.getElementById("uniqueIdentifier").innerHTML = "hello"; 

希望这可以帮助

Answer 3

只有在该元素成为文档的一部分之后，才能使用document.getElementById函数。 只要您没有将创建的元素追加到文档中的元素之一，就无法get它。

Answer 4

您只需三行代码即可实现！！！

 $('body').html('<div></div>'); $('div').attr('id', 'test'); $('div#test').html("<h1>Hello World</h1>") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>