值得注意的是：节点的创建、插入以及删除都是操作父级容器。
（1）创建
var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次

（2）插入/追加
appendChild() 从尾部追加元素 red.appendChild('newDiv);
insertBefore() 在某个元素之前插入 red.insertBefore(newDiv,firstChild);

（3）删除节点
red.removeChild(lastChild);

========================相关示例代码如下================================

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>practice</title>

<style>

#red{

width: 400px;

height: 400px;

border:1px solid #ccc;

}

.active1{

width: 200px;

height: 200px;

background: pink;

border-radius: 50%;

margin-top: 20px;

margin-left: 10px;

}

.active2{

width: 100px;

height: 100px;

background: green;

border-radius: 50%;

margin-top: 20px;

margin-left: 10px;

}

</style>

</head>

<body>

<div id="red"></div>

<button id="delete">删除节点</button>

</body>

<script>

var red = document.getElementById('red');

//document.createElement()创建元素;注意创建的元素只能操作一次

var newDiv1 = document.createElement('div');

newDiv1.className = 'active1';

//追加元素

red.appendChild(newDiv1);

//重新创建newDiv2，因为newDiv1只能操作一次

var newDiv2 = document.createElement('div');

newDiv2.className = 'active2';

red.appendChild(newDiv2);

//获取第一个子元素节点firstElementChild

var firstChild = red.firstElementChild;

console.log(firstChild);

//获取最后一个子元素节点lastElementChild

var lastChild = red.lastElementChild;

console.log(lastChild);

//在第一个子元素节点之前插入元素

var newDiv3 = document.createElement('div');

newDiv3.innerHTML = 'today is nice!';

red.insertBefore(newDiv3,firstChild);

//在第二子元素节点之前插入元素

var newDiv4 = document.createElement('div');

newDiv4.innerHTML = 'middle position!';

red.insertBefore(newDiv4,lastChild);

//删除节点

var remove = document.getElementById('delete');

remove.onclick = function(){

red.removeChild(newDiv4);

}

</script>

</html>

DOM节点的创建、插入、删除的更多相关文章

  1. DOM节点的创建、插入、删除、查找、替换

    在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点 使用的命令是 var oDiv = document.createElem ...

  2. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

  3. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  4. DOM节点的创建

    1.createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称 var a=document.getElementsByClassName('name1') ...

  5. js节点的创建添加删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 链表的C++实现——创建-插入-删除-输出-清空

    注:学习了数据结构与算法分析后,对链表进行了C++实现,参考博文:http://www.cnblogs.com/tao560532/articles/2199280.html 环境:VS2013 // ...

  7. [PHP] 数据结构-链表创建-插入-删除-查找的PHP实现

    链表获取元素1.声明结点p指向链表第一个结点,j初始化1开始2.j<i,p指向下一结点,因为此时p是指向的p的next,因此不需要等于3.如果到末尾了,p还为null,就是没有查找到 插入元素1 ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. day35—JavaScript操作元素（创建、删除）

    转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...

随机推荐

  1. 良田高拍仪集成vue项目

    一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...

  2. [NOI.AC] count

    思路: 考虑组合数学. 当所求中没有重复的时候,方案数就是\(C_{n + 1}^{k}\) 当有重复的时候... 设相等的数字之间的距离为\(len\) 当取0个数时,方案数就是\(C_{n - 1 ...

  3. （转）使用Apache的ab工具进行压力测试

    转:http://www.cnblogs.com/luckyliu/archive/2012/03/04/2379306.html Apache附带的ab工具(本机使用的PHP环境是WAMP集成环境, ...

  4. 解决jqGrid中，当前页一直显示为0的问题

    项目中,经常会见到使用 jqGrid 进行一些数据的列表展示,而且使用起来也比较方便.但是有时会遇到一些奇怪的问题,比如前几天我就遇到了在使用 jqGrid 时,当前页一直显示为 0 的问题.下图就是 ...

  5. 剑指offer——08斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...

  6. 创建一个学生表student，默认的表空间为users，字段自定，同时为表的各个字段分别添加合适的约束，然后测试约束的验证状态。

    create table student(id number(4) constraint prim_key primary key,name varchar(8) not null,sex varch ...

  7. 【python】并集交集

    set是用来去重的. 在list里使用union函数.这种方式不适用于元素为字典的. list(set(a)^set(b)) 这是求差集 所以交集就是并集和ab的差集. import random d ...

  8. iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 5000 -j DNAT --to-destination

    启动docker容器时报错: iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 5000 -j DNAT ...

  9. SpringMVC向前台传输 JSON数据

    所需Jar包jackson-core.jackson-annotations和jackson-databind 在MVC的配置文件中加入<mvc:annotation-driven>< ...

  10. MySQL 10章_视图、事务

    一. 视图: 视图(view)是保存了查询语句的一种数据库对象,其数据来源是查询语句对应的数据表,他的结果与数据表查询的结果一样也是一张虚拟的数据表 . 为什么需要视图: ) 不同的用户关心的数据可能 ...