JavaScript创建节点

Posted 2020-09-27 15037075275z

1.javascript创建节点

createElement();注：创建元素节点。

例如：

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

 

createTextNode();注：创建文本节点。

例如：

var v = document.createTextNode("大家好");

2.js节点操作

appendChild();注：给当前节点添加一个子节点

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

var text = document.createTextNode("大家好");

p.apendChild(text);注：添加

 

removeChild();删除子节点

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

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

div.removeChild(p);

 

replaceChild();注：更换子节点

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

var text = document.createTextNode("大家好");

p.apendChild(text);注：把text添加到p里面

var text1 = document.createTextNode("你们好");

p.apendChild(text1,text);注：这样就把text换成了text1。

 

insertBefore();将一个节点插入另一个节点之前。

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

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

div.apendChild(p);注：将p添加到div，这个时候p在div中的位置是第一

var p1 = document.createElement("h1");

div.insertBefore(p,p1);注：这样就把h1放到p的前面，p在div中的位置是第二。

 

2.JavaScript元素内容与属性的操作

innerhtml;获取指定元素的HTML。className;获得指定元素的Class属性。style;获得指定元素的style样式。getAttribute();获得指定元素的属性值。setAttribute();为新元素设置属性。removeAttribute();删除指定元素的属性。

例如;

<div id = "div1">abc<div/>

document.getElementById("div1").innerHTML="cba";

document.getElementById("div1").setAttribute("style","color:#000;");