Javascript创建节点

下面列出常用的创建节点的方法：

QQ截图20161013111044.png

以上四种方法都是 document 对象的方法。

createElement()

createElement()用来创建一个元素节点，即 nodeType=1 的节点。

语法：

    document.createElement(tagName)

其中，tagName 为HTML标签的名称，并将返回一个节点对象。

例如，创建<div>标签和<p>标签的语句如下：

var ele_div=document.createElement("div");

var ele_p=document.createElement("p");

createTextNode()

createTextNode()用来创建一个文本节点，即 nodeType=3 的节点。

语法：

    document.createTextNode(text)

其中，text 为文本节点的内容，并将返回一个节点对象。

例如，创建一个文本节点，内容为“ 这是文本节点 ”：

var ele_text=document.createTextNode(" 这是文本节点 ");

createComment()

createComment()用来创建一个注释节点，即 nodeType=8 的节点。

语法：

    document.createComment(comment)

其中，comment 为注释的内容，并将返回一个节点对象。

例如，创建一个注释节点，内容为“ 这是一个注释节点 ”：

var ele_comment=document.createComment(" 这是一个注释节点 ");

createDocumentFragment()

createDocumentFragment() 用来创建文档碎片节点。

文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如元素节点、文本节点、注释节点等。文档碎片节点在创建之初是空的，需要向它添加节点。

语法：

     document.createDocumentFragment();

例如，创建一个文档碎片节点，并将它赋值给变量：

var ele_fragment=document.createDocumentFragment();

继续学习

新建文件

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <script type="text/javascript"> var main1 = document.body; //创建链接 function createa(url,text) { var alink = document.createElement("a"); alink.setAttribute("href",url); alink.innerHTML=text; return alink; } // 调用函数创建链接 main1.appendChild(createa("http://ask.php.cn","php中文网")); </script> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠