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 函数速查表
Feb 07 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
js单例模式详解实例
Nov 21 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JS轮播图的实现方法
Aug 24 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
JavaScript实现通讯录功能
2020/12/27 Javascript
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
应用数学自荐书范文
2013/11/24 职场文书
单位在职证明书
2014/09/11 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书