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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JS编程小常识很有用
Nov 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
JS作用域深度解析
Dec 29 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php去除HTML标签实例
2013/11/06 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
python paramiko模块学习分享
2017/08/23 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Python 多进程、多线程效率对比
2020/11/19 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
25道Java面试题集合
2013/05/21 面试题
20年同学聚会邀请函
2014/02/04 职场文书
高中家长寄语
2014/04/02 职场文书
土地租赁意向书
2014/07/30 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
党员违纪检讨书
2015/05/05 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang