HTML DOM 方法综合实例

最新推荐文章于 2024-07-25 12:15:00 发布

生活中的思索

最新推荐文章于 2024-07-25 12:15:00 发布

阅读量350

点赞数

文章标签： html dom 函数实例 remove

本文链接：https://blog.csdn.net/qq_35864642/article/details/77852282

版权

<!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

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML DOM 方法综合实例

<!DOCTYPE html><html><body><script>function addOnclick(){ var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element
复制链接

扫一扫