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 最常用的10个自定义函数[推荐]
Dec 26 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
laypage分页控件使用实例详解
May 19 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
Angular的MVC和作用域
Dec 26 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 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微信开发之百度天气预报
2016/11/18 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
js对象关系图 方便dom操作
2012/03/18 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
岗位职责怎么写
2014/03/14 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android