HTML DOM 方法综合实例

来源：互联网发布：算法的效率只与编辑：程序博客网时间：2024/06/05 19:15
<!DOCTYPE html><html><body><script>function addOnclick(){    var para=document.createElement("p");    var node=document.createTextNode("This is new.");    para.appendChild(node);    var element=document.getElementById("div1");    element.appendChild(para);}function removeOnclick(){    var parent=document.getElementById("div1");    var child=document.getElementById("p1");    parent.removeChild(child);}function removeOnclick1(){    var child=document.getElementById("p1");    child.parentNode.removeChild(child);}function replectOnclick(){    var para=document.createElement("p");    var node=document.createTextNode("This is new.");    para.appendChild(node);    var parent=document.getElementById("div1");    var child=document.getElementById("p1");    parent.replaceChild(para,child);}function ChangeText(){    document.getElementById("p1").innerHTML="New text!";}</script><div id="div1"><p id="p1">This is a paragraph.This is p1</p><p id="p2">This is another paragraph.</p></div><button onclick="addOnclick();">appendChild点击添加</button><button onclick="removeOnclick();">removeChild点击删除pi</button><button onclick="removeOnclick1();">removeChild点击删除pi1</button><button onclick="replectOnclick();">replaceChild点击替换pi</button><input type="button" onclick="ChangeText()" value="innerHTML点击替换"></body></html>
阅读全文
0 0