HTML DOM createElement()用法及代碼示例

在HTML文檔中，document.createElement()是用於創建HTML元素的方法。如果無法識別指定的elementName，則創建使用elementName指定的元素，或者創建未知的HTML元素。

用法

var element = document.createElement("elementName");

在以上語法中，elementName作為參數傳遞。 elementName指定創建的元素的類型。創建的元素的nodeName初始化為elementName值。 document.createElement()返回新創建的元素。

示例1：此示例說明如何創建元素。

輸入：

<!DOCTYPE html> 
<html> 
  
<head> 
    <script> 
        function createparagraph() { 
            var x = document.createElement("p"); 
            var t =  
                document.createTextNode("Paragraph is created."); 
            x.appendChild(t); 
            document.body.appendChild(x); 
        } 
    </script> 
</head> 
  
<body> 
    <button onclick="createparagraph()">CreateParagraph</button> 
</body> 
  
</html>

輸出：
原來：

按創建段落按鈕後：

說明：

首先使用document.createElement()創建元素。
使用document.createTextNode()創建文本節點。
現在，使用appendChild()將文本附加到。
使用appendChild()將附加到<body>。

示例2：此示例說明如何創建元素並將其附加到<div>元素。

輸入：

<!DOCTYPE html> 
<html> 
  
<head> 
    <script> 
        function createparagraph() { 
            var x = document.createElement("p"); 
            var t =  
                document.createTextNode("Paragraph is created."); 
            x.appendChild(t); 
            document.getElementById("divid").appendChild(x); 
        } 
    </script> 
</head> 
  
<body> 
    <div id="divid"> A div element</div> 
    <button onclick="createparagraph()">CreateParagraph</button> 
</body> 
  
</html>

輸出：

原來：

按下CreateParagraph按鈕後：

支持的瀏覽器：下麵列出了DOM createElement()方法支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自chaitanyashah707大神的英文原創作品 HTML | DOM createElement() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。