如何為新創建的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>