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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
Vuex的实战使用详解
Oct 31 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python中的字典遍历备忘
2015/01/17 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
深入了解Python 变量作用域
2020/07/24 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
客服文员岗位职责
2013/11/29 职场文书
环保倡议书怎么写
2014/05/16 职场文书
汽车广告策划方案
2014/05/31 职场文书
商铺门面租房协议书
2014/10/21 职场文书
校友会致辞
2015/07/30 职场文书
导游词之井冈山
2019/11/20 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang