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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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网上商城购物车设计代码分享
2012/02/15 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
原生JS实现天气预报
2020/06/16 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
岗位说明书标准范本
2014/07/30 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python