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常见注意事项
Jan 01 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
使用Angular CLI生成路由的方法
Mar 24 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
js正则取值的结果数组调试方法
Oct 10 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
js对象基础实例分析
2015/01/13 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
OpenCV实现人脸识别
2017/04/07 Python
python实现12306火车票查询器
2017/04/20 Python
Python图像读写方法对比
2020/11/16 Python
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
法学院方阵解说词
2014/01/29 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
信用卡工作证明模板
2014/09/14 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2019教师的学习计划
2019/06/25 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers