如何通過Javascript「創建」HTML元素？

也許有更好的方式來說我的問題，說「通過Javascript動態創建DOM元素」，但我決定編寫簡單的標題，以防後者出錯。無論如何，有沒有一種方法可以通過Javascript「產生」HTML元素？例如，我可以點擊我的網站上的一個按鈕，一段會出現？如何通過Javascript「創建」HTML元素？

來源

2013-07-25 Carpetfizz

您確定無法在頁面右上方看到搜索框嗎？ – melancia

https://developer.mozilla.org/en-US/docs/Web/API/document.createElement&& https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild – Ian

您可以使用createElement()這樣的：

var el = docment.createElement("elementtype");

這將創建的任何元素，如果你與類型的元素（「格」，「P」，等等）

後更換elementtype您可以使用本機.appendChild()或.insertBefore()方法，無論您想要將這個新創建的元素附加到哪個元素上。

var attachTo = document.getElementById('appendToMe'); 
attachTo.appendChild(el);

它會在頁面中該元素的最後一個元素之後。

參考文獻：

來源

2013-07-25 15:29:07 Jnatalzia

謝謝您！！！我會在11分鐘內接受這個問題。 – Carpetfizz

var el = document.createElement（「elementtype」）; –

prependChild（）' – Ian

var element = document.createElement('p'); 
element.innerHTML = "Hey, this is a new paragraph!"; 
parentElement.appendChild(element);

欲瞭解更多信息，請參閱document.createElement和Node.appendChild

來源

2013-07-25 15:32:44 Vishnu

只是一個註釋：'innerHTML'被廣泛支持，但它不是W3C標準，因爲它是HTML5 DOM的一部分，工作草案（然而，它是一個whatwg Living標準）。使用當前的w3c標準，它應該是'element.appendChild（document.createTextNode（'嘿，這是一個新的段落！'））;' – Oriol

@Oriol這是我聽過的最微不足道的事情之一。「innerHTML」得到了廣泛的支持，標準甚至不應該成爲這樣的因素。我**同意**應該使用'document.createTextNode'來代替這個例子，並且在大多數情況下（儘管你可以很容易地使用'textContent' /'innerText'），但引用W3C在這裏並不適用 – Ian

@Ian我只是想，如果提問者不知道如何創建一個元素，他不會知道'innerHTML'還不是標準的。我認爲，即使得到廣泛支持，每個使用非標準事物的人都應該意識到這一點。 – Oriol

如何通過Javascript「創建」HTML元素？

回答

相關問題