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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。