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的公告无限循环滚动实现代码
May 11 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
Vue头像处理方案小结
Jul 26 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
原生JS实现天气预报
Jun 16 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
JS代码实现页面切换效果
Jan 10 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JQuery 入门实例1
2009/06/25 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python 类之间的参数传递方式
2019/12/20 Python
python默认参数调用方法解析
2020/02/09 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
工程专业应届生求职信
2014/02/19 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
检讨书模板
2015/01/29 职场文书
2016年春节慰问信息
2015/03/25 职场文书
超市员工辞职信范文
2015/05/12 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Ruby处理YAML和json数据
2022/04/18 Ruby
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js