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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
微信小程序日历效果
2018/12/29 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python实现多进程通信实例分析
2019/09/01 Python
人力资源部经理岗位职责规定
2014/02/23 职场文书
工程索赔意向书
2014/08/30 职场文书
闪闪的红星观后感
2015/06/08 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
KTV员工管理制度
2015/08/06 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS