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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
编写React组件项目实践分析
Mar 04 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
layui table 获取分页 limit的方法
Sep 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
通过文字传递创建的图形按钮
2006/10/09 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php实现的日历程序
2015/06/18 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
纯php生成随机密码
2015/10/30 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JavaScript函数详解
2014/11/17 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python实现GIF图倒放
2020/07/16 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
我的中国梦口号
2014/06/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers