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 模式设计之工厂模式详细说明
May 10 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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下通过POST还是GET来传值
2008/06/05 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php实现对象克隆的方法
2015/06/20 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
异步加载script的代码
2011/01/12 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python复制文件代码实现
2013/12/23 Python
Django日志模块logging的配置详解
2017/02/14 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python几种常见算法汇总
2020/06/02 Python
python 实现图片批量压缩的示例
2020/12/18 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
广州盈通面试题
2015/12/05 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
二年级体育教学反思
2014/01/15 职场文书
客房部经理岗位职责
2015/02/02 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Python初学者必备的文件读写指南
2021/06/23 Python