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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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 imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
化工工艺专业求职信
2013/09/22 职场文书
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
后备干部考察材料
2014/02/12 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
解析Redis Cluster原理
2021/06/21 Redis
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers