使用JavaScript在新標籤元素中創建標籤元素

我是JavaScript新手，因此我試圖自己介紹基本知識，而不使用像JQuery這樣的包，以便更好地理解語言。使用JavaScript在新標籤元素中創建標籤元素

我的問題是關於在另一個html標籤內使用javascript創建一個html標籤，我似乎無法做到這一點沒有得到一個錯誤（發佈在底部）。

比如我一直試圖做的是通過以下使對方的子元素：

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <script> 
    var element1 = document.createElement("div"); 
    var element2 = document.createElement("svg"); 
    var element3 = document.createElement("rect"); 
    element1.setAttribute('id', 'div1'); 
    element2.setAttribute('id', 'out'); 
//This is where I fall short 
//One way i have tried 
    document.getElementById('div1').appendChild(element2); 
    document.getElementById('out').appendChild(element3); 
//another way I have tried 
    document.getElementByClassName('div').appendChild(element2); 
//last way I tried 
    document.getElementById('div1').innerHTML = element2; 
</script> 
</body> 
</html

雖然，我一直在努力使這項工作我已經來了短，因爲這個我不斷收到錯誤

"TypeError: 'null' is not an object (evaluating 'document.getElementBy(Id/ClassName) 
().innerHTML/appendChild')

任何幫助，非常感謝！另外，如果問題不多，因爲我仍然試圖理解javaScript概念，請解釋您的回答。

來源

2014-10-31 Luis

在獲取元素之前，您必須將元素追加到主體中，因爲它們不存在於DOM中。

var element1 = document.createElement("div"); 
var element2 = document.createElement("svg"); 
var element3 = document.createElement("rect"); 
element1.setAttribute('id', 'div1'); 
element2.setAttribute('id', 'out'); 

//you missed these. 
document.body.append(element1); 
document.body.append(element2); 

document.getElementById('div1').appendChild(element2); 
document.getElementById('out').appendChild(element3);

來源

2014-10-31 08:25:55 Xlander

對不起，我剛剛修復了屬性代碼錯別字。關於追加到DOM，與document.body.append（element1），這是必要的，使其身體標記的一部分？它不會通過在身體中放置一個元素來自動完成它？ – Luis 2014-10-31 08:38:07

好的。通過執行'document.getElementById（'div1'）'，您正在搜索DOM中具有'div1'的元素。但該元素不存在於DOM中。所以，在搜索它之前，你必須把它附加到'body'。 – Xlander 2014-10-31 08:40:50

謝謝你的澄清！ – Luis 2014-10-31 08:44:20

的問題是，一旦該元素在文檔中document.getElementById('div1')才能發揮作用，因爲它是你已經擁有該節點的引用，但是，這樣使用：

element1.appendChild (element2);

或者：

document.body.appendChild(element1); 
document.getElementById ('div1').appendChild (element2);

將節點追加到<body>元素，然後在document中搜索該元素的id。

來源

2014-10-31 08:25:43

因此，爲了追加一個子元素，你不必繼續背誦document.getElementById，而只是把元素引用加上.appendChild（內部元素）？ – Luis 2014-10-31 08:32:37

使用JavaScript在新標籤元素中創建標籤元素

回答

相關問題