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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
Javascript创建类和对象详解
May 31 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
js实现双色球效果
Aug 02 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP函数microtime()用法与说明
2013/12/04 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
用于业余项目的8个优秀Python库
2018/09/21 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python中实现输入一个整数的案例
2020/05/03 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
成人教育自我鉴定
2013/11/01 职场文书
实习生个人的自我评价
2013/12/08 职场文书
法律系毕业生求职信
2014/05/28 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
工资收入证明
2014/10/07 职场文书
售票员岗位职责
2015/02/15 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers