值得注意的是：节点的创建、插入以及删除都是操作父级容器。
（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由工程图视图tag获取图纸页tag UF_DRAW_ask_drawing_of_view

    #include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...

  2. hdu多校第七场 1006（hdu6651） Final Exam 博弈

    题意: 有n道题,这n道题共m分,要求你至少做出k道才能及格,你可以自由安排复习时间,但是只有某道题复习时间严格大于题目分配的分值时这道题才能够被做出来,求最少的,能够保证及格的复习时间.复习时间和分 ...

  3. LeetCode 1037. Valid Boomerang (有效的回旋镖)

    题目标签:Math 题目给了我们三个点,让我们判断这三个点是否在一条直线上. 利用斜率 k = (y1 - y0) / (x1 - x0) 来判断,如果 三个点 abc, ab 的斜率 = bc 的斜 ...

  4. Instrumentation 实践详解

    原文地址:https://blog.csdn.net/pengjunlee/article/details/72717622

  5. class9_Menubar 菜单

    最终的运行效果图(程序见序号5) #!/usr/bin/env python# -*- coding:utf-8 -*-# -------------------------------------- ...

  6. Spark 调优之ShuffleManager、Shuffle

    Shuffle 概述 影响Spark性能的大BOSS就是shuffle,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作. 因此,如果要让作业的性能更上一层楼,就有必要对 shuffle 过 ...

  7. 【JUC】JDK1.8源码分析之AbstractQueuedSynchronizer

    一.前言 在锁框架中,AbstractQueuedSynchronizer抽象类可以毫不夸张的说,占据着核心地位,它提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.所以很有必 ...

  8. IOS中input光标跑偏问题的解决方法

    ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...

  9. Firefox Developer Edition 是专为开发者设计

    Firefox Developer Edition 当前是基于 Firefox 35.0a2,这款全新的浏览器包括内建调试功能,集成类似于Firefox火狐工具适配器的专用工具,并在浏览器当中内建We ...

  10. IntelliJ IDEA（的springboot项目）环境准备(配置maven和jdk)

    1.配置maven .使用自己电脑上装的maven版本,而非默认的.(方法一) (1)选择configure--Settings (2)搜索maven,配置3.6.2版本的maven.注意:将mave ...