值得注意的是：节点的创建、插入以及删除都是操作父级容器。
（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. Python3 From Zero——{最初的意识：006～数据编码与处理}

    一.读写CSV数据: #!/usr/bin/env python3 #-*- coding=utf8 -*- import csv with open('kxtx.csv', 'rt') as f: ...

  2. adb shell top 使用

    adb shell top 一.其中相关参数: >adb shell top -h  Usage: top [ -m max_procs ] [ -n iterations ] [ -d del ...

  3. python学习8—函数之高阶函数与内置函数

    python学习8—函数之高阶函数与内置函数 1. 高阶函数 a. map()函数 对第二个输入的参数进行第一个输入的参数指定的操作.map()函数的返回值是一个迭代器,只可以迭代一次,迭代过后会被释 ...

  4. centos7使用iptables作为防火墙方法

    centos7使用iptables作为防火墙方法查看firewalld状态: systemctl status firewalld将centos7默认的firewalld停止,并将iptables作为 ...

  5. 人脸识别--Open set和Close set的区别

    训练和测试人脸识别分类器时,总会提到Open-set和Close-set.这俩词到底是什么概念呢?有什么区别呢? 所谓close-set,就是所有的测试集都在训练集中出现过.所以每次的预测直接得出测试 ...

  6. C++之指针与数组区别

    C++/C程序中,数组要么在静态存储区被创建(如全局数组),要么在栈上被创建.数组名对应着(而不是指向)一块内存,其地址与容量在生命期内保持不变,只有数组的内容可以改变.指针可以随时指向任意类型的内存 ...

  7. 时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间(转)

    原文:https://blog.csdn.net/sxf_123456/article/details/81582964 from datetime import datetime,timedelta ...

  8. android 自定义shape 带阴影边框效果

    在drawable 里面 建立一个 xml 直接复制 看效果 自己调试就可以 <?xml version="1.0" encoding="utf-8"?& ...

  9. SQLSTATE[HY000]: General error: 1366 Incorrect string value

    在Laravel项目的 storages/logs/Laravel.log看到的错误信息片段: SQLSTATE[HY000]: General error: 1366 Incorrect strin ...

  10. leetcode-219-存在重复元素②

    题目描述: 第一次提交:超时 class Solution: def containsNearbyDuplicate(self, nums: List[int], k: int) -> bool ...