DOM节点-appendChild

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<ul id="ele1">
<li>11111111111111111111</li>
<li id="li2">22222222222222222222</li>
<li>33333333333333333333</li>
<li>4444444444444444444</li>
<li>5555555555555555555</li>
</ul>
</body>
<script type="text/ecmascript">
//给元素添加节点
var ele = document.getElementById('ele1');
//创建li元素和文本内容
var oLi = document.createElement('li');
var oText = document.createTextNode('今天由我主持晨会呵呵');
//appendChild将子节点加到当前节点的后面
oLi.appendChild(oText);
//定义一个新节点和一个老节点
function inserAfter(newEle, oldEle) {
var next = oldEle.nextSibling;
//判断节点后面是否有弟弟节点
if (next) {
//如果有弟弟节点
next.parentNode.insertBefore(newEle, next);
} else {
//如果没有弟弟节点
oldEle.parentNode.appendChild(newEle);
}
}
var oLi2 = document.getElementById("li2");
inserAfter(oLi, oLi2);
</script>
</html>
DOM节点-appendChild的更多相关文章
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 深入理解DOM节点关系
× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...
- 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...
- DOM节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- JS中级 - 01:DOM节点
1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
随机推荐
- run a Freight robot (1)
1. Freight robot The Fetch and Freight Research Edition Robots are indoor laboratory robots. Coordin ...
- Using SSH on Linux
This document covers the SSH client on the Linux Operating System and other OSes that use OpenSSH. W ...
- 第一发。。。codeforces 609 C Load Balancing 贪心
/*题意:给你一个序列经过最小变换,变换一次为一个数+1,一个数-1,使得最大值与最小值相差1:思路:与最后得到的序列相差的sum/2:*/#include<iostream> #incl ...
- nyoj 19擅长排列的小明 (DFS)
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- 详解C#委托,事件与回调函数
.Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等.“protected void Pag ...
- RTSP协议、RTMP协议、HTTP协议的区别
理论上RTSP RTMPHTTP都可以做直播和点播,但一般做直播用RTSP RTMP,做点播用HTTP.做视频会议的时候原来用SIP协议,现在基本上被RTMP协议取代了. RTSP. RTMP.HTT ...
- Android开发设计模式之——单例模式关于线程不安全问题处理
单例模式是设计模式中最常见也最简单的一种设计模式,保证了在程序中只有一个实例存在并且能全局的访问到.比如在Android实际APP 开发中用到的 账号信息对象管理, 数据库对象(SQLiteOpenH ...
- Xcode好用的插件
注释:每当Xcode升级之后,都会导致原有的Xcode插件不能使用,这是因为每个插件的Info.plist中记录了该插件兼容Xcode版本的DVTPlugInCompatibilityUUID,而每个 ...
- poj 1144 Network(无向图求割顶数)
题目链接:poj 1144 题意就是说有 n(标号为 1 ~ n)个网点连接成的一个网络,critical places 表示删去后使得图不连通的顶点,也就是割顶,求图中割顶的个数. 直接上大白书上的 ...
- 在Maven中设置Nexus私有服务为中央工厂(repository)
原文:http://blog.csdn.net/mexican_jacky/article/details/50275695 nexus中的仓库列表 第一种方式: <repositories&g ...