javascript使用appendChild追加节点实例
本文实例讲述了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程序设计有所帮助。
相关推荐
-
js AppendChild与insertBefore用法详细对比
我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text
-
初学js插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前
-
js利用appendChild对<li>标签进行排序的实现方法
按照从大到小排序 appendChild: 假设父级a中已经有子节点b,那么a.appendChild(b)的作用是:1.先将子节点b从父级a中删除:2.再将子节点b添加到a中,放在最末尾. <body> <button id="bt1">提交</button> <ul id="ul1"> <li>32</li> <li>243</li> <li>43<
-
javascript使用appendChild追加节点实例
本文实例讲述了javascript使用appendChild追加节点的方法.分享给大家供大家参考.具体分析如下: DOM树节点的增加,实例代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ var nodep = document.createElement('p');//创建p节点 var art = document.createTextNo
-
JS中appendChild追加子节点无效的解决方法
JS中appendChild追加子节点无效 有这么一段代码: let divs = document.getElementsByClassName('test'); let btn = document.createElement('div'); for(let i=0;i<divs.length;i++){ divs[i].appendChild(btn); } 表面上这段代码为每个 class属性为 test的元素添加一个 div子元素. 看起来没有什么问题,但是执行完之后却发现子元素并没有
-
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>
-
JavaScript中对DOM节点的访问、创建、修改、删除
DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
-
删除javascript所创建子节点的方法
本文实例讲述了删除javascript所创建子节点的方法.分享给大家供大家参考.具体如下: js创建的节点,一时不知道如何删除...耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = document.createElement("li"); li_button.className = "button"; var li_button_a = document.createElem
-
javascript动态修改Li节点值的方法
本文实例讲述了javascript动态修改Li节点值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
JavaScript动态添加style节点的方法
本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =
-
javascript实现下雪效果【实例代码】
原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin
-
JavaScript单例模式能不能去实例只留单原理解析
目录 一.单例模式的分类 二.惰性单例模式 二.普通单例模式 总结 一.单例模式的分类 一个环境中有且只有一个实例,并且当前环境可以访问到它.往小了说,当前环境可以是一个函数作用域.块级作用域,往大了说可以是全局window或者global环境.如果按照实例的创建时机进行单例模式的分类,有: 普通单例模式:在环境初始时就创建 惰性单例模式:在某个特定的时机才创建 二.惰性单例模式 从单例模式的定义出发,一个环境中有且只有一个实例,并且使用时才去创建它,那么就可以把当前单例模式称之为惰性单例模式
-
jQuery动态创建元素以及追加节点的实现方法
我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子
随机推荐
- JavaScript encodeURI 和encodeURIComponent
- 匹配模式 - XSL教程 - 4
- 详解Ruby中的循环语句的用法
- JavaScript数据结构之二叉树的查找算法示例
- iOS开发项目- 基于WebSocket的聊天通讯(1)
- ASP.NET中获取URL重写前的原始地址详解
- 详解CentOS7.2部署KVM虚拟机(图文)
- firefox下javascript实现高亮关键词的方法
- php准确计算复活节日期的方法
- 基于MySQL分区性能的详细介绍
- PHP获取客户端及服务器端IP的封装类
- JS给超链接加确认对话框的方法
- MySQL中数据类型的验证
- JS获取多维数组中相同键的值实现方法示例
- 浅谈通过JS拦截 pushState和replaceState事件
- IIS配置网站定时任务必设参数图文教程
- java在文件尾部追加内容的简单实例
- Java Process详解及实例
- C#实现复杂XML的序列化与反序列化
- How do I change MySQL timezone?