javascript动态修改html页面内容_javascript查询数据库动态变更html页面的值-优快云博客

本文链接：https://blog.youkuaiyun.com/linshizhan/article/details/7719634

本文介绍了如何使用JavaScript动态地删除和增加HTML页面的内容。通过示例代码展示，包括删除按钮触发的内容清除以及新增按钮实现的内容添加功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}