appendChild不起作用。 Javascript新功能

我是JavaScript新手，目前我有一個任務。有一個問題要求我們在<p>標籤上附加一個新的textNode。但我的appendChild不想工作。我所有的其他代碼都可以正常工作，並且完成它應有的功能。顯然我做錯了什麼。appendChild不起作用。 Javascript新功能

編輯： 在我的控制檯我收到一個錯誤：未捕獲的類型錯誤：無法調用「的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>

來源

2013-03-12 Riette du Toit

謝謝改變了。是的，我在控制檯中出現錯誤。忘了在主帖中提到。它說：「未捕獲的TypeError：無法調用方法'appendChild'爲null」 – 2013-03-12 19:38:47

您正在刪除段落，所以'var element = document.getElementById（「demo」）;'會失敗。 – j08691 2013-03-12 19:39:39

我不想追加到「演示」。演示被刪除後，我創建了一個新的元素，「p」。然後我嘗試將新的textNode追加到「p」。所以我應該從'var element = document.getElementById（「demo」）;'將其更改爲'var element = document.getElementById（「p」）'？ – 2013-03-12 19:43:51

你的邏輯是錯誤的。

您刪除這些行

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

演示稱爲元素然後嘗試一個子節點追加到你剛剛在這裏刪除的節點：

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

您不能追加元素不再存在的元素。如果你刪除removeChild行，那麼一切都應該工作。

而且，你有塊是錯誤的，你需要將其更改爲：

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

在那之後，一切都應該是不錯的。

來源

2013-03-12 19:43:11

我的搭配沒有被應用。即使有變化 – 2013-03-12 20:08:39

道歉，我的錯誤，你需要使用=而不是：。我已經更新了我的答案以證明這一點。 – 2013-03-12 20:37:07

謝謝！工作！ – 2013-03-13 06:39:22

你with塊包含語法錯誤，這是導致腳本不一切運行。

變化，阻止這樣的：

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

來源

2013-03-12 19:37:57

首先，你刪除的元素，後來，你嘗試之後補充一下。由於它已被刪除，因此無法再在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。

來源

2013-03-12 19:40:27 MarcoK

好的，我明白我做錯了什麼。但是，我該如何解決它？下面是來自作業的問題：2.1將文檔標題更改爲「標記，你就是它！」（其成功） 2.2通過訪問DOM刪除具有選擇器ID「demo」的元素（帽子也是成功的） 2.3使用javascript創建一個新的段落元素「p」（我也這麼做過） 2.4使用以下文本創建並附加一個文本節點到2.3中的元素：「快速棕色狐狸跳過懶狗「。 – 2013-03-12 19:50:39

如果你只是想顯示文本（但不在DOM元素內），你可以簡單地將它附加到'document.body'（[JSFiddle]（http://jsfiddle.net/nSy5H/1/））。 – MarcoK 2013-03-12 19:54:57

您在這裏刪除元素

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

，然後試圖在這裏使用它：

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

來源

2013-03-12 19:40:27

您正在刪除演示，然後嘗試稍後參考它。即使在銷燬p＃demo之後，也可以看到這個jsFiddle以更簡潔的方式去做你似乎正在嘗試的東西。

http://jsfiddle.net/FzBrS/

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

來源

2013-03-12 19:44:46

要刪除的<p id="demo">（這是由可變孩子舉行），然後你嘗試添加一個孩子這一元素（已刪除）

你可以不刪除此元素，或者將para元素添加到parent

刪除此行：var element=document.getElementById("demo");
與parent.appendChild(para);

更換element.appendChild(para);，一切都將正常工作。

來源

2013-03-12 19:54:16 Dragos

這很有效！我現在唯一的問題是在with語句中陳述的樣式沒有被應用。 – 2013-03-12 19:58:40

我不確定（）是否在正確的上下文中使用。
我寧願在'var para = document.createElement（'p'）'之後使用add'
'para.style.color ='#fff';
para.style.fontFamily ='Arial';
para.style.backgroundColor ='＃345''
等等等等 – Dragos 2013-03-12 20:22:42

如果我能做到這一點，我會，但我們得到的任務是專門說我們必須使用（） – 2013-03-12 20:28:15

appendChild不起作用。 Javascript新功能

回答

相關問題