javascript动态修改html页面内容

来源：互联网发布：中国建筑西北院知乎编辑：程序博客网时间：2024/05/21 17:54

1：下面是动态删除页面内容

效果：

没删除前：

删除后：

我们可以看见段落二被删除了

javascript代码：

function remove(){var p2 = document.getElementById("p2");p2.parentNode.removeChild(p2);}window.onload = function(){var btn1 = document.getElementById("btn1");btn1.onclick = remove;}

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>testdelete</title>    <script type="text/javascript" src="js/delete.js">    </script></head><body>        <p id="p1">我是段落一</p>        <p id="p2">我是段落二</p>        <p id="p3">我是段落三</p>        <p id="p4">我是段落四</p>        <p id="p5">我是段落五</p>                <input type="button"  id="btn1" value="点击删除段落"/></body></html>

2：动态增加页面内容和删除页面内容

点击增加后：

点击删除后：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/add.js">        </script></head><body>              <input type="file"  id="f1"/>            <input type="button" id="btn1" value="添加一个上传域"/>      </body></html>

js代码：

function add(){    var  f1 = document.getElementById("f1");    var  parent = f1.parentNode;    var  newf = document.createElement("input");    newf.setAttribute("type","file");    var  br1 = document.createElement("br");    var  br2 = document.createElement("br");    var  btn = document.createElement("input");    btn.setAttribute("type","button");    btn.setAttribute("value","删除上传域");    btn.onclick = remove;    parent.insertBefore(newf,f1);    parent.insertBefore(btn,f1);    parent.insertBefore(br1,f1);    parent.insertBefore(br2,f1);}function remove(){    var  a = document.getElementsByTagName("input");        var  b = document.getElementsByTagName("br");    if(b.length>0)    {       b[0].parentNode.removeChild(b[0]);    }           for(var i = 0;i<a.length;i++)    {    if(a[i].type="file")    {    a[i].parentNode.removeChild(a[i]);    break;    }    }    a = document.getElementsByTagName("input");    for(var i = 0;i<a.length;i++)    {    if(a[i].type="button")    {    a[i].parentNode.removeChild(a[i]);    break;    }    }}window.onload = function(){var btn1 = document.getElementById("btn1");btn1.onclick = add;}