JS操作元素节点
使用 js 创建一个节点然后动态插入到 html 中.
Demo: js 创建文本节点
1 //获取div节点 2 var div = document.getElementsByTagName("div")[0]; 3 //创建文本节点 4 var textNode = document.createTextNode("文本节点"); 5 //将新创建的文本节点追加到div中 6 div.appendChild(textNode);
Demo: 创建元素节点
1 //获取div节点 2 var div = document.getElementsByTagName("div")[0]; 3 //创建元素h1节点 4 var elementNode = document.createElement("h1"); 5 //为新建的元素节点增加文本内容 6 elementNode.textContent="新建元素节点文本" 7 //将新创建的节点追加到div中 8 div.appendChild(elementNode);
Demo: 使用 insertBefore 实现插入节点
使用 insertBefore 可以指定插入节点的位置
1 //获取div节点 2 var div = document.getElementsByTagName("div")[0]; 3 //创建元素h1节点 4 var elementNode1 = document.createElement("h1"); 5 var elementNode2 = document.createElement("h1"); 6 //为新建的元素节点增加文本内容 7 elementNode1.textContent="使用insertbefore新建元素节点文本" 8 elementNode2.textContent="使用appendChild新建元素节点文本" 9 //将新创建的节点追加到div中 10 div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]); 11 div.appendChild(elementNode2);
Demo: 删除节点
该方法是有父节点调用的, 可以删除指定的子节点, 但是不能删除孙子节点.
div.removeChild(document.getElementsByTagName("p")[2]);
Demo: 使用 js 操作 css 样式
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js 学习</title> <<style> div{ margin:0 auto; height:500px; 90%; background-color: grey; color:white; } </style> </head> <body> <center> <button type="button" onclick="changeColor('black')">护眼模式</button> <button type="button" onclick="changeColor('grey')">护眼模式</button> <button type="button" onclick="changeColor('blue')">护眼模式</button> </center> <div> <h1> 长篇武侠小说!!! </h1> </div> </body> </html> <script src="index.js"></script>
js:
1 function changeColor(color){
2 document.getElementsByTagName("div")[0].style.backgroundColor=color;
3 }