JavaScript的DOM编程--11--插入节点
插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入节点</title>
<script type="text/javascript">
//测试 insertBefore() 插入节点
//该方法除了进行插入外, 还有移动节点的功能.
window.onload=function(){
//1. 把 #rl 插入到 #bj 节点的前面
var cityNode=document.getElementById("city");
var bjNode=document.getElementById("bj");
var rlNode=document.getElementById("rl"); alert("测试开始了")
//cityNode.insertBefore(rlNode,bjNode);//(新,目标节点) //测试方法
var refNode = document.getElementById("dj");
insetAfter(rlNode,refNode);
} //写一个insetAfter方法/把 newNode 插入到 refNode 的后面
function insetAfter(newNode,refNode){
//1. 测试 refNode 是否为其父节点的最后一个子节点
var parentNode=refNode.parentNode;
if(parentNode){
var lastNode=parentNode.lastChild;
//2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点
if(refNode==lastNode){
parentNode.appendChild(newNode);
} //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟节点的前面.
else{
var nextNode=refNode.nextSibling;
parentNode.insertBefore(newNode,nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/> </body>
</html>
JavaScript的DOM编程--11--插入节点的更多相关文章
- JavaScript的DOM编程--10--删除节点
1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...
- JavaScript的DOM编程--05--获取文本节点
获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- JavaScript HTML DOM 元素操作(节点)
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...
随机推荐
- Python3.6_安装numpy
刚刚编辑了一次,但是犯了新手都会犯的没保存的错误,第二次编辑可能略有粗糙,如有问题欢迎指正 想用Python 画图,但是我的是vs自动安装的因此缺少许多必要的库,在安装的过程中也是遇到了诸多问题,下面 ...
- java连接VMware虚拟机Oracle数据库问题
最近在电脑上装了虚拟机,为的是在虚拟机上安装Oracle数据库,Oracle实在太占内存,配置低的电脑装个Oracle几乎就瘫了,没办法,搞个虚拟机玩玩.我虚拟机用的是xp系统,顺便怀念下经典.装好O ...
- 主流PHP框架间的比较(Zend Framework,CakePHP,CodeIgniter,Symfony,ThinkPHP,FleaPHP)
Zend Framework 优点: Zend Framework大量应用了PHP5中面向对象的新特征:接口.异常.抽象类.SPL等等.这些东西的应用让Zend Framework具有高度的模块化和灵 ...
- win10下Python3.6安装、配置以及pip安装包教程
0.目录 1.前言 2.安装python 3.使用pip下载.安装包 3.1 安装Scrapy 3.2 安装PyQt 3.3 同时安装多个包 3.4 pip的常用命令 1.前言 之前在电脑上安装了py ...
- Stern-Brocot Tree
在<具体数学>4.5中看到了SB-Tree,觉得非常有趣,就去研究了一下. 首先介绍一下Stern-Brocot Tree.Stern-Brocot Tree是一种能将所有的最简分数都表示 ...
- C# 把Div变为滚动条
<div runat="server" style="overflow:auto;width:350px;height:200px" > <a ...
- Loadrunner 读取文件
char buffer[1000]; long file_stream; char * filename = "d:\log.txt"; file_stream=fopen(fil ...
- nginx防恶意域名解析
今天无意间查看访问日志发现一个fhxywh.com的域名居然解析到了我的服务器,也就是说通过这个域名也能访问我的博客,这个就是赤裸裸的恶意域名解析了. 这个危害非常大,不仅会影响用户,而且不利于SEO ...
- 自己手写WEB程序框架并执行
1.新建目录,起名MyWeb 2.目录下,新建两个目录 WEB-INF, META-INF,,还能够新建一些jsp,html文件 ,如 index.html 3在WEB-INF中必须存在一个文件WEB ...
- CI环境配置
CI:php的MVC框架M(模型model):与数据库打交道的,一般情况下数据库里面的一张表对应一个Model,在里面对应该表的增删改查的操作V(视图view):用户看到的界面,其中很多数据是从数据库 ...