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程序设计有所帮助。

赞 (0)

相关推荐

  • 初学js插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前

  • js利用appendChild对<li>标签进行排序的实现方法

    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<

  • js AppendChild与insertBefore用法详细对比

    我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text

  • 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节点的访问、创建、修改、删除

    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 追加在父元素的最后一个子

随机推荐