的Javascript直接訪問DOM元素，並採用可變

Question

爲什麼做

var consoleElem = document.getElementById("debug"); 
consoleElem.appendChild(msgElement) 

同樣的事情

document.getElementById('debug').appendChild(msgElement); 

在我看來是的DOM元素（調試）是它自己的變量，然後將其複製到另一個變量意味着我有調試元素的兩個副本...爲什麼我應該對新副本（var consoleElem）所做的任何更改對原始DOM元素進行更改？

Answer 1

中有什麼consoleElem不是DOM元素本身，而是它的一個引用..所以這通過查詢進行任何改變，則實際施加到DOM元素本身..

如果你想修改一個元素而不實際改變原始元素本身，那麼你應該克隆它.. jQuery提供了一個克隆功能。

Answer 2

呼叫document.getElementById返回對DOM元素的引用。所有該行

var consoleElem = document.getElementById("debug"); 

確實是將該引用存儲在變量中;它不會創造任何東西。你可以有十幾個引用同一個元素的變量，它仍然只是一個元素。

如果要創建元素，請使用document.createElement。如果您想複製元素，請使用newElement = oldElement.cloneNode()。