创建一个html节点,HTML DOM 07 创建节点

示例 1 :

创建元素节点

通过createElement 创建一个新的元素节点

接着把该元素节点，通过appendChild加入到另一个元素节点div1中

Hello HTML DOM

function add(){

var hr=document.createElement("hr");

var div1 = document.getElementById("d");

div1.appendChild(hr);

}

在div中追加一个hr元素

示例 2 :

创建文本节点

首先创建一个元素节点p (p是p标签，不是随便命名的变量名)

接着通过createTextNode创建一个内容节点text

把text加入到p

再把p加入到div

Hello HTML DOM

function add(){

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

var text = document.createTextNode("这是通过DOM创建出来的

");

p.appendChild(text);

var div1 = document.getElementById("d");

div1.appendChild(p);

}

在div中追加一个p元素

示例 3 :

创建属性节点

首先创建一个元素节点a

接着创建一个内容节点content

把content加入到a

然后通过createAttribute创建一个属性节点 href

设置href的值为http:12306.com

通过setAttributeNode把该属性设置到元素节点a上

最后把a加入到div

Hello HTML DOM

function add(){

var a=document.createElement("a");

var content = document.createTextNode("http://12306.com");

a.appendChild(content);

var href = document.createAttribute("href");

href.nodeValue="http://12306.com";

a.setAttributeNode(href);

var div1 = document.getElementById("d");

div1.appendChild(a);

}

在div中追加一个超链

标签：appendChild,07,DOM,创建,HTML,var,document,节点,div1

来源： https://www.cnblogs.com/JasperZhao/p/13379088.html