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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
详解VUE 数组更新
Dec 16 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
浅谈layui里的上传控件问题
Sep 26 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
script标签属性用type还是language
2015/01/21 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
django如何通过类视图使用装饰器
2019/07/24 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
环境科学专业教师求职信
2014/07/12 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL