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 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js数组操作常用方法
May 08 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 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调用三种数据库的方法(3)
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php正则表达式学习笔记
2015/11/13 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python看某个模块的版本方法
2018/10/16 Python
python增加图像对比度的方法
2019/07/12 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
实习生自荐信范文分享
2013/11/27 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
珍惜资源的建议书
2014/08/26 职场文书
意向协议书
2015/01/27 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android