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 ul标签下拉菜单演示代码
Dec 11 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
几种tab切换详解
Feb 03 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 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
咖啡知识大全
2021/03/03 新手入门
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python 如何实现访问者模式
2020/07/28 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
党员自我评价分享
2013/12/13 职场文书
小区门卫工作职责
2013/12/14 职场文书
培训协议书范本
2014/04/22 职场文书
家长给学校的建议书
2014/05/15 职场文书
志愿者宣传口号
2014/06/17 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
民事代理词范文
2015/05/25 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书