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父子窗体间的调用方法
Mar 31 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js表单登陆验证示例
2016/10/19 Javascript
vue组件间通信解析
2017/03/01 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python中enumerate函数用法实例分析
2015/05/20 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
如何在Django项目中引入静态文件
2019/07/26 Python
手写一个python迭代器过程详解
2019/08/27 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
商务英语专业自荐信
2013/10/14 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
销售类求职信
2014/06/13 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python