值得注意的是：节点的创建、插入以及删除都是操作父级容器。
（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. 秦曾昌人工智能课程---5、KNN和朴素贝叶斯

    秦曾昌人工智能课程---5.KNN和朴素贝叶斯 一.总结 一句话总结: 拟合和概率:构建机器学习模型,一般有拟合和概率两种方式 轻学无用:一定要保证学有所用,要深入学习,比如之前做的安卓,一定要学通, ...

  2. detours学习

    最近学习detours3.0,总结下学习过程,给后来学习者一点参考,也便于自己以后复习 首先应该知道detours可以干什么,学习之前最好看一下detours文档,这个文档很简单,只有4篇文章,相对比 ...

  3. SPSS缺失值得分析处理

    SPSS缺失值得分析处理 在资料收集的过程中,由于各种原因可能导致数据收集不全,就会产生缺失值,且这种情况往往无法避免.如果缺失值处理不当,就会导致分析结果精度降低,出现偏倚甚至是错误的理论,因此缺失 ...

  4. mac下google插件SwitchyOmega笔记

    端口:

  5. OCP—051试题

    FROM: http://blog.itpub.net/26736162/viewspace-1252569/?page=2 http://blog.csdn.net/elearnings/artic ...

  6. UVA-10200-Prime Time-判断素数个数（打表预处理）+精度控制

    题意: 给出a.b区间,判断区间内素数所占百分比 思路: 注意提前打表和控制精度1e-8的范围足够用了 细节: 精度的处理 判断素数的方法(且返回值为bool) 数据类型的强制转换 保存素数个数 提前 ...

  7. Spring AOP之xml 配置实现

    首先这个配置模式估计现在已经不用了,因为我在我们公司的项目里面并没有看到这么配置AOP相关的东西.不过,这个就和学习spring的控制反转(IOC)和依赖注入(DI)一样,刚刚开始的时候,都是从简单的 ...

  8. C#Object与XML文件或二进制文件之间的转化

    Object To Xml 文件 public static bool Serializer<T>(object obj, string path) { FileStream xmlfil ...

  9. jquery操作html元素之（删除元素）

    删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 jQuery remove( ...

  10. 打包的@font-face包

    在网页中使用 @font-face 规则嵌入字体,前提是可以从你的网站或第三方 Web 服务器下载到相应的字体.以这种方式提供的字体,会在使用该字体的页面第一次加载时被浏览器下载并缓存起来,以后就不用 ...