Question

JavaScript 中的 createElement 和 appendChild

2013-08-09

796

javascript html appendchild createelement

我试图弄清楚为什么 createElement 和 appendChild 不起作用。我相信我的代码是正确的，所以我不太清楚为什么它不起作用...（我使用的是 IE 10）

代码已更新

JavaScript 文件：

var myObj = {

   firstName: "John",
   lastName: "Smith"
};

HTML 文件：

<!DOCTYPE html />
<html>
<title>The Data Structure</title>
<body>

<script type="text/javascript" src="TheData.js">

var theElement = document.createElement('p');
var theText = document.createTextNode(myObj.firstName);
theElement.appendChild(theText);
document.body.appendChild(theElement);

</script>
</body>
</html>

Answer 1

问题是您同时在 script 标记上提供了 src ，并且同时在其中提供了内容。这是无效的，您可以执行其中一个，但不能同时执行。大多数浏览器将使用 src 并忽略内容。

除此之外，创建元素不会将其放入 DOM 中。您必须将其添加到某个位置（通过 appendChild 或 insertBefore 或类似方法）。

因此可能：

<script src="TheData.js"></script>
<!-- Note: Two separate script elements -->
<script>
var theElement = document.createElement('p');
var theText = document.createTextNode(myObj.firstName);
theElement.appendChild(theText);
document.body.appendChild(theElement); // <==== Note: Adding `the Element` to the DOM
</script>

Answer 2

您从未将 theElement 附加到文档！在末尾再添加一行：

document.body.appendChild(theElement);

顺便提一下，这个立即调用的函数有什么用？

(function () {
return myObj.firstName;
}());

它什么都不做！