这孩子不工作。Javascript新手_Javascript_Appendchild_Textnode

这孩子不工作。Javascript新手

javascript

这孩子不工作。Javascript新手,javascript,appendchild,textnode,Javascript,Appendchild,Textnode,我是JavaScript新手，目前有一项任务。有一个问题要求我们在标记上附加一个新的textNode。但是我的孩子不想工作。我所有的其他代码都运行良好，并且做它应该做的事情。显然我做错了什么编辑：在我的控制台中，我收到一个错误：uncaughttypeerror:无法调用null的方法'appendChild' <head> <style type="text/css"> #demo { font-family: Verdana, Geneva, sans-serif

我是JavaScript新手，目前有一项任务。有一个问题要求我们在

标记上附加一个新的textNode。但是我的孩子不想工作。我所有的其他代码都运行良好，并且做它应该做的事情。显然我做错了什么

编辑： 在我的控制台中，我收到一个错误：uncaughttypeerror:无法调用null的方法'appendChild'

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


#演示{
字体系列：Verdana，日内瓦，无衬线；
字体大小：14px；
字体：斜体；
背景色：#996；
高度：25px；
宽度：400px；
填充：20px；
}
存在主义div问：“我为什么在这里？”
document.title=“Tag，就是你！”；
var parent=document.body；
var child=document.getElementById（“demo”）；
父母。removeChild（子女）；
var para=document.createElement（“p”）；
var node=document.createTextNode（“敏捷的棕色狐狸跳过了懒狗”）；
子节点（节点）段；
var元素=document.getElementById（“demo”）；
要素.附件（第6段）；
（第2段）{
颜色：“FFF”；
家庭：“Arial”；
背景颜色：“345”；
字体大小：“30px”；
textAlign：“居中”；
宽度：“600px”；
高度：“200px”；
填充：“20px”；
边距：“0px自动”；
};

您的

with

块包含语法错误，这导致脚本根本无法运行

将该块更改为：

with(para.style) {
    color = "#fff";
    fontFamily = "Arial";
    // and so on
}

首先，删除元素，然后，尝试在之后添加一些内容。因为它被删除了，所以在DOM中再也找不到它了

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

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

因此，如果您不想，请不要删除该元素

您正在删除此处的元素

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

然后尝试在这里使用它：

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

你的逻辑是错误的

在这些行中删除名为demo的元素

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

然后，尝试将子节点附加到刚才删除的节点：

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

不能将元素附加到不再存在的元素。如果删除

removeChild

行，那么一切都应该正常

此外，with块错误，您需要将其更改为：

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

之后，一切都会好起来。

您将删除演示，然后尝试稍后引用它。查看此jsFiddle，以获得一种更干净的方法来完成您似乎正在尝试的操作，即使在销毁了p#demo之后也是如此

您正在删除

（由变量子级持有）然后您尝试将一个子元素添加到此元素（已删除）

您既可以不删除此元素，也可以将

para

元素添加到

parent

删除这一行：

var element=document.getElementById（“demo”）


替换元素.appendChild（段落）与parent.appendChild（段落）

一切都会正常工作。
谢谢您的更改。是的，我在控制台中得到一个错误。在主要的帖子里忘了提到。它说：“uncaughttypeerror:cannotcallmethod'appendChild'of null”您正在删除段落，因此var element=document.getElementById（“demo”）将失败。我不想附加到“演示”中。删除演示后，我创建了一个新元素“p”。然后我尝试将新的textNode附加到“p”中。那么我是否应该将其从var element=document.getElementById（“demo”）到var element=document.getElementById（“p”）
？好的，我知道我做错了什么。但我该如何修复它呢？下面是作业中的问题：2.1将文档标题更改为“Tag，you's！”（成功）2.2通过访问DOM删除选择器id为“demo”的元素（hat也成功）2.3使用javascript创建新的段落元素“p”（我也这么做了）2.4创建一个textnode并将其附加到2.3中的元素上，其中包含以下文本：“快速的棕色狐狸跳过了懒狗。”如果您只想显示文本（但不想显示在DOM元素内部），只需将其附加到文档.body
（）。这就行了！我现在唯一的问题是没有应用with语句中声明的样式。我不确定with（）是否在正确的上下文中使用。
我宁愿在var para=document.createElement（'p'）
之后使用add，类似于
para.style.color='#fff'
para.style.fontfamine='Arial'
para.style.backgroundColor='#345'

等等，如果我能做到这一点，我会这么做，但我们得到的任务是明确地说，我们必须使用（）我的with没有被应用。即使使用changesApologies，我的错误是，您也需要使用=而不是：。我已经更新了我的答案来说明这一点。
document.title="Tag, you're it!";

var demo = document.getElementById("demo");
demo.parentNode.removeChild(demo);
var p = document.createElement("p");

document.body.appendChild(p);

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