值得注意的是：节点的创建、插入以及删除都是操作父级容器。
（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. NX二次开发-UFUN修改当前导出CGM文件选项设置UF_CGM_set_session_export_options

    文章转载自唐康林NX二次开发论坛,原文出处: http://www.nxopen.cn/thread-126-1-1.html 刚才有同学问到这个问题,如果是用NXOpen来做,直接录制一下就可以了: ...

  2. Rootkit之SSDT hook（通过CR0）

    CR0当中有一个写保护位,是保护内存不可写属性的,为了能够写入内核,只能把它的保护给咔嚓掉了,不过--如果做完了手脚但不还原写保护属性的话,极有可能会BOSD. /================== ...

  3. 『BASH』——Hadex's brief analysis of "Lookahead and Lookbehind Zero-Length Assertions"

    /*为节省时间,本文以汉文撰写*/ -前言- 深入学习正则表达式,可以很好的提高思维逻辑的缜密性:又因正则应用于几乎所有高级编程语言,其重要性不言而喻,是江湖人士必备的内功心法. 正则表达式概要(ob ...

  4. java-day13

    异常 指的是程序在执行过程中,出现的非正常情况,最终会导致JVM的非正常停止 异常分类:编译异常,运行期异常 异常的产生过程分析 throw关键字:指方法中抛出指定异常 使用格式:throw new ...

  5. Android Button.getWidth()为0的问题

    View在onCreate的时候,没有渲染组件,所以获取到的宽度和高度为0, 需要添加一个观察者,在layout渲染后再去取宽高.代码如下: private Button btn_icon; @Ove ...

  6. 【学术篇】luogu1351 [NOIP2014提高组] 联合权值

    一道提高组的题..... 传送门:题目在这里.... 现在都懒得更自己的blog了,怕是太颓废了_ (:з」∠) _ 好久没做题了,手都生了.(好吧其实是做题方面手太生了) 这题我都不想讲了,把代码一 ...

  7. MySQL - 锁等待超时与information_schema的三个表

    引用地址:https://blog.csdn.net/J080624/article/details/80596958 回顾一下生产中的一次MySQL异常,Cause: java.sql.SQLExc ...

  8. Android studio 添加引用Module项目 与 设置Module项目的Libs的Jar在主项目里使用

    前言 添加引用Module项目 设置Module项目的Libs的Jar在主项目里使用 1.在项目里添加libs包,并且加入jar 2.设置这个module项目的build.gradle depende ...

  9. SUBTRACT

    SUBTRACT 给出一个长度为n序列\(\{a_i\}\),定义一个操作,记做\(con(a,i)\),意思是用\(a_i-a_{i+1}\)替代\(a_i,a_{i+1}\),显然最后一个数字不能 ...

  10. scala中类的简单使用记录

    import scala.collection.mutable.ArrayBuffer /** * scala 中内部类的使用 */ class Classes { class Stu(name:St ...