createElement和createTextNode和appendChild

createElement(创建新元素):

document.createElement(nodeName)

createTextNode(创建新文本):

document.createTextNode(text)

appendChild(添加子节点):

parent.appendChild(child)
举个例子吧:

创建一个简单的项目来简单了解一下用法:

test.html文件:
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="example.js"></script>
</body>
</html>
example.js:
var p = document.createElement("p");//创建元素节点P
var txt = document.createTextNode("Hello World!");//创建内容为“Hello World!”的文本节点
var test = document.getElementById("test");//获取html页面上的ID为“test”的元素节点
p.appendChild(txt);//为元素节点P添加一个类型为文本节点的子节点“txt”;
test.appendChild(p);//为元素节点test添加一个类型为元素节点的子节点“P”;
结果如下:
2.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容