javascript中創建另一個div的子div（DOM）

我有一個問題，使div成爲另一個div的子項。我想學習如何在JavaScript中做到這一點。javascript中創建另一個div的子div（DOM）

我想基本上是創建此：

<body> 
<div id = "graph"> 
    <div id "data"> 
    </div> 
</div> 
</body>

通過使用JavaScript。最終目標是一次又一次創建許多這樣的內容。

這裏是我到目前爲止的代碼：

var graph = document.createElement('div'); 
graph.id = "graph"; 
document.body.appendChild(graph); 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data";

上述工作，沒有錯誤。當我添加：

document.getElementbyId("graph").appendChild("data");

我得到「未捕獲的類型錯誤：undefined是不是一個函數」。

從我的研究中，這似乎是每個人的建議。另外，appendChild函數似乎是完整的，據我所知。我錯過了什麼？先謝謝你！！

來源

2014-09-04 JSolano

'getElementbyId' - 在後一個錯字？錯誤消息告訴我們這個錯字很可能是在真實的代碼中。 – Teemu 2014-09-04 17:20:57

'getElementbyId' - >'getElementById'。另外，這裏的字符串是什麼？ '.appendChild（「數據」）'。 – 2014-09-04 17:25:55

你可以使用一種稱爲「調試」的新技術來追蹤這樣的問題。例如，從你的代碼中複製'document.getElementbyId'這一行並粘貼到devtools控制檯中。當你看到「TypeError」時，問問自己，顯然不需要什麼東西成爲一個函數？第一個候選人是'document.getElementbyId'，所以只需將其粘貼到控制檯中，就會發現它是未定義的。那怎麼可能？仔細觀察它，或者完全按原樣複製它並粘貼到Google，你會發現它是'getElementById'的拼寫錯誤。錯誤信息有意義 – 2014-09-04 17:29:02

你的問題（這是導致你的類型錯誤）是你試圖追加一個字符串，而不是對子元素本身的引用。

var parent = document.createElement("div"); 
parent.id = "graph"; 
var child = document.createElement("div"); 
child.id = "data"; 
parent.appendChild(child);

來源

2014-09-04 17:26:10 Xaxis

你應該像正在做的那樣追加一個對象。

var parent = document.getElementById("graph"); 
parent.appendChild(barWrapper);

編輯：

您也不需要在這裏打電話的getElementById。您應該可以將子項追加到父項，然後將父項追加到主體中。像這樣：

var graph = document.createElement('div'); 
graph.id = "graph"; 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data"; 

graph.appendChild(barWrapper); 
document.body.appendChild(graph);

來源

2014-09-04 17:21:07

你錯過了發現錯字。 – 2014-09-04 17:24:17

@torazaburo問題不僅僅是錯字。此外，用戶正試圖將字符串「數據」追加到圖元素，而不是他創建的子元素。 – Brian 2014-09-04 17:27:21

的誤差beign由錯字造成的，它應該是getElementById

document.getElementbyId("graph") 
>TypeError: undefined is not a function

，當你解決這個問題，並執行代碼，你會得到

document.getElementById("graph").appendChild("data") 
>NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

這是因爲你試圖追加一個字符串而不是一個實際的html節點。你將需要獲取元素第一以及

document.getElementById("graph").appendChild(document.getElementById("data"));

既然你已經有了這兩個對象的引用更清潔的解決方案是

grap.appendChild(barWrapper);

來源

2014-09-04 17:29:15

有幾個問題

document.getElementbyId("graph")應該是document.getElementById("graph")
.appendChild("data")應該是.appendChild(bargraph)

這個js作品：

var graph = document.createElement('div'); 
graph.id = "graph"; 
document.body.appendChild(graph); 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data"; 
document.getElementById("graph").appendChild(barWrapper);

小提琴這裏：http://jsfiddle.net/hatvjete/

來源

2014-09-04 17:30:10 dave

javascript中創建另一個div的子div（DOM）

回答

相關問題