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实现json数据以csv格式下载
Jan 09 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python匿名函数用法实例分析
2019/08/03 Python
pytorch 常用线性函数详解
2020/01/15 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
神路信息Java面试题目
2013/03/31 面试题
公司活动方案范文
2014/03/06 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
绿色小区申报材料
2014/08/22 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers