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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
Element Badge标记的使用方法
Jul 27 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
网页运行时提示对象不支持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对字符串的递增运算分析
2010/08/08 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JS location几个方法小姐
2008/07/09 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
如何利用python 读取配置文件
2021/01/06 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
大学生毕业自荐信
2013/10/10 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
青年志愿者活动总结
2014/04/26 职场文书
公司离职证明样本
2014/09/13 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
刑事辩护词范文
2015/05/21 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS