javascript动态修改html页面内容

     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代码：

 

	
		
		
	
	    
	
	
        
我是段落一
        
我是段落二
        
我是段落三
        
我是段落四
        
我是段落五
        
        
	

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

  

 

点击增加后：

  

点击删除后：

   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