这篇文章主要介绍了关于javascript动态改变html页面元素例如添加或删除,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
html页面元素可以通过js动态改变,比如可以向html中添加元素或删除某个元素,下面为示例代码,感兴趣的朋友不要错过
可以通过javascript动态的改变html中的元素
向html中添加元素
首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>测试文档</title>
<script type="text/javascript">
function add(){
var element = document.createelement("p");
var node = document.createtextnode("添加新段落");
element.appendchild(node);
x = document.getelementbyid("demo");
x.appendchild(element);
}
</script>
</head>
<body>
<p id="demo">
<p>这是第一段</p>
</p>
<input type="button" value="按钮" onclick="add()" />
</body>
</html>
删除html中的某个元素
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>测试文档</title>
<script type="text/javascript">
function deletee(){
var father = document.getelementbyid("demo");
var child = document.getelementbyid("p1");
father.removechild(child);
}
</script>
</head>
<body>
<p id="demo">
<p id="p1">这是第一段</p>
<p id="p2">这是第二段</p>
</p>
<input type="button" value="删除" onclick="deletee()" />
</body>
</html>
相关推荐:
javascript 计时事件的了解与使用方法
javascript动态添加li元素
javascript动态创建html标记的方法实例总结
以上就是javascript动态改变html页面元素例如添加或删除的详细内容。