javascript - appendChild 不起作用。 Javascript 新手

标签 javascript appendchild textnode

我是 JavaScript 的新手,目前有一项任务。一个问题要求我们将一个新的 textNode 附加到 <p>标签。但是我的 appendChild 不想工作。我的所有其他代码都工作正常,并且按预期进行。显然我做错了什么。

编辑: 在我的控制台中,我收到一个错误:Uncaught TypeError: Cannot call method 'appendChild' of null

<head>
<style type="text/css">
#demo {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
background-color: #996;
height: 25px;
width: 400px;
padding: 20px;
}
</style>
</head>

<body>

<p id = "demo">Existential div asks: &quot;Why I am I here?&quot;</p>

<script>

document.title="Tag, you're it!";

var parent=document.body;
var child=document.getElementById("demo");
parent.removeChild(child);

var para=document.createElement("p");
var node=document.createTextNode("The quick brown fox jumps over the lazy dog.");
para.appendChild(node);

var element=document.getElementById("demo");
element.appendChild(para);


with(para){
color: "#FFF";
fontFamily : "Arial";
backgroundColor: "#345";
fontSize: "30px";
textAlign: "center";
width: "600px";
height: "200px";
padding: "20px";
margin: "0px auto";
};


</script>
</body>

最佳答案

首先,您删除该元素,然后尝试添加一些元素。由于它已被删除,因此无法再在 DOM 中找到它。

var child=document.getElementById("demo");
parent.removeChild(child);

var element=document.getElementById("demo"); // returns nothing, since it was removed
element.appendChild(para);

因此,如果您不想,请不要删除该元素。 JSFiddle demo .

关于javascript - appendChild 不起作用。 Javascript 新手,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15370522/

相关文章:

javascript - 查找所有文本节点

javascript - 如何将 HTML 转换为有效的 XHTML?

javascript - grunt uglify 显示错误

javascript - appendChild 很慢

javascript - jQuery : Select previous sibling of text node

css - 我如何设置作为 body 元素的直接子元素的文本节点的样式?

javascript - 使用初始实例化类的 Jasmine 测试

javascript - SequelizeJS HasOne 关联错误

javascript - 我正在尝试使用 Javascript 读取示例 json 动态插入一段 html 代码,但无法这样做

javascript - 如何在标签内附加 SVG 圆圈