JavaScript动态改变HTML页面元素例如添加或删除


Posted in Javascript onAugust 10, 2014

可以通过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> 
<div id="demo"> 
<p>这是第一段</p> 
</div> 
<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> 
<div id="demo"> 
<p id="p1">这是第一段</p> 
<p id="p2">这是第二段</p> 
</div> 
<input type="button" value="删除" onclick="deleteE()" /> 
</body> 
</html>
Javascript 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
Vuex提升学习篇
Jan 11 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 #Javascript
js中直接声明一个对象的方法
Aug 10 #Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 #Javascript
js中window.open打开一个新的页面
Aug 10 #Javascript
window.location.href的用法(动态输出跳转)
Aug 09 #Javascript
javascript父、子页面交互技巧总结
Aug 08 #Javascript
jQuery的animate函数学习记录
Aug 08 #Javascript
You might like
PHP 开源框架22个简单简介
2009/08/24 PHP
php定界符
2014/06/19 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python 查看文件的读写权限方法
2018/01/23 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python常用外部指令执行代码实例
2020/11/05 Python
求职推荐信范文
2013/12/01 职场文书
意向协议书范本
2014/04/23 职场文书
五一促销活动总结
2014/07/01 职场文书
文员岗位职责
2015/02/04 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript