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)

在appendnull之前（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 Browser中没有。我现在想知道现在是否还有其他问题，但至少我可以让它发挥作用。谢谢大家。

原文：（我在编程方面非常糟糕。）

我尝试创建一个新的HTML元素，为其分配一个新ID，然后使用.innerHTML调用该ID并输出一些字符串。

如果我使用

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

然后是：

document.newElement.id = "newId";

OR：

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

然后尝试使用新元素分配文本和输出：

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 body。

＆＃13;

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

＆＃13;

Answer 2

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

如果你没有将它附加到正文并尝试搜索dom为document.getElementById（“uniqueIdentifier”）将返回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

你只需3行代码就可以做到这一点!!!

$('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>

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

4 个答案: