Question

当我在html中定义输入标记并通过id访问JS时，我正在获取我的标记。

HTML代码：

<input class="easyui-combobox" name="language" style="width:30%;" id= "XX">

JS代码：

var cc = document.getElementById("XX");

这里的事情很好。

但是当我从javascript创建并尝试访问时，我正在获取。我想要动态所以我需要从JS创建。

JS代码：

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";

这里应用后我得到null：

var cc = document.getElementById("XX");

Answer 1

您已使用document.body.appendChild(input);

将创建的元素附加到文档中

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input);
console.log(document.getElementById("XX"));

Answer 2

您尚未添加元素

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input); 

var cc = document.getElementById("XX");
console.log(cc);

Answer 3

您需要将input元素附加到文档

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input);

Answer 4

您已使用 -

创建了元素

var input = document.createElement("input");

现在您需要将其附加到HTML，以便您可以在DOM上找到它。

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input); 

var fetchedElement = document.getElementById("XX");
console.log(fetchedElement);

createElement()创建一个元素节点。

appendChild()将您的元素节点添加到DOM。

Answer 5

该元素已创建，但需要附加到 DOM 。使用 var input = document.createElement("input"); input.className = 'easyui-combobox'; input.style = 'width:30%'; input.id = "XX"; document.body.appendChild(input);或<!doctype html> <html lang="en"> <head> </style> </head> <body> <img src="assets/images/DOG.gif" style="display: none; background: #000;" id="DOG"/> <img src="assets/images/CAT.gif" style="display: none; background: #ff0000;" id="CAT"/> <script type="text/javascript"> var DOG = document.getElementById('DOG'); var CAT = document.getElementById('CAT'); function picture() { if(curent_score < 10) { DOG.style.display = 'block'; CAT.style.display = 'none'; } else { DOG.style.display = 'none'; CAT.style.display = 'block'; } } </script> </body> </html>方法。

{{1}}

document.getElementById由JS给出Null而不是HTML

5 个答案: