DOM修改

修改DOM包括:改变HTML内容、CSS样式、HTML属性,创建新的HTML元素、删除已有的HTML元素、改变事件

注:不需要查找就能获得的元素:

html  document.documentElement

head  document.head

body  document.body

改变HTML内容

最简单的方法就是使用innerHTML属性

document.getElementById("p1").innerHTML="newstring";

改变HTML样式

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

创建新的HTML元素

首先创建该元素,再把它追加到已有元素上。

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

var node = document.createTextNode("这是一个新段落");

para.appendChild(node);

document.getElementById("div1").appendChild(para);

appendChild是将元素作为父元素最后一个子元素插入,可以用insertBefore()将元素插入到指定元素的前面

document.getElementById("div1").insertBefore(para,指定子元素);

删除已有的HTML元素

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

var child=document.getElementById("p1");

parent.removeChild(child);

替换HTML元素

parent 父元素,child 子元素,para 要使用的替换元素

parent.replaceChild(para,child);

原文地址:https://www.cnblogs.com/1016391912pm/p/11911793.html