JS DOM节点增删改查 属性设置

createElement(name)创建元素appendChild();将元素添加

获得要删除的元素获得它的父元素使用removeChild()方法删除

第一种方式:使用上面增和删结合完成修改第二中方式:使用setAttribute();方法修改属性 ?????????使用innerHTML属性修改元素的内容

<script type="text/javascript">//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页. ???function addNode(){ ???????//1.获得 第一个div ???????var div = document.getElementById("div_1"); ???????//2.创建a标签 ?createElement==>创建一个a标签 ??<a></a> ???????var eleA = ?document.createElement("a"); ???????//3.为a标签添加属性 <a href="http://www.baidu.com"></a> ???????eleA.setAttribute("href", "http://www.baidu.com"); ???????//4.为a标签添加内容 <a href="http://www.baidu.com">百度</a> ???????eleA.innerHTML = "百度"; ???????????//5.将a标签添加到div中 ???????div.appendChild(eleA); ???} ???//点击后 删除div区域2 ???function deleteNode(){ ???????//1 获得要删除的div区域 ???????????var div = document.getElementById("div_2"); ???????//2.获得父亲 ???????????var parent = div.parentNode; ???????//3 由父亲操刀 ????????????parent.removeChild(div); ???} ???//点击后 替换div区域3 为一个美女 ???function updateNode(){ ???????//1 获得要替换的div区域3 ???????var div = document.getElementById("div_3"); ???????//2创建img标签对象 <img /> ???????var img = document.createElement("img"); ???????//3添加属性 <img src="001.jpg" /> ???????img.setAttribute("src", "001.JPG"); ???????//4.获得父节点 ???????var parent = div.parentNode; ???????//5.替换 ???????parent.replaceChild(img, div); ???} ???//点击后 将div区域4 克隆一份 添加到页面底部 ???????function copyNode(){ ???????//1.获取要克隆的div ???????var div = document.getElementById("div_4"); ???????//2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己 ???????var div_copy = div.cloneNode(true); ???????//3.获得父亲 ???????var parent = div.parentNode; ???????//4.添加 ???????parent.appendChild(div_copy); ???} ???????</script>

<p id="p2">Hello world!</p>document.getElementById("p2").style.color="blue";<br> ????????????????????????????.style.fontSize=48px