javascript使用appendChild追加节点实例


Posted in Javascript onJanuary 12, 2015

本文实例讲述了javascript使用appendChild追加节点的方法。分享给大家供大家参考。具体分析如下:

DOM树节点的增加,实例代码如下:

<html>

<head>

<script type="text/javascript">

function t(){

 var nodep = document.createElement('p');//创建p节点

 var art = document.createTextNode('你好,世界');//创建文本节点

 

 var cont = document.getElementById('container');//获取节点

 cont.appendChild(nodep);//增加节点

 nodep.appendChild(art);//增加文本节点

}

</script>

<style type="text/css">

p{width:100px;height:100px;background:green;}

#container p{width:100px;height:100px;background:blue;}

</style>

</head>

<body>

<div id="container"><p>hello world</p>

</div>

<p>说两句吧</p>

<hr />

<button onclick="t()" value="">增加节点</button>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
js获取checkbox值的方法
Jan 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
总结js中的一些兼容性易错的问题
Dec 18 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 #Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 #Javascript
jQuery制作拼图小游戏
Jan 12 #Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 #Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 #Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
You might like
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js中的string.format函数代码
2020/08/11 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
经销商培训邀请函
2014/01/21 职场文书
班级德育工作实施方案
2014/02/21 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
创业计划书之面包店
2019/09/17 职场文书