1 创建新的 HTML 元素 (节点)

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

2 添加新元素到尾部

　　element.appendChild(para);

将新元素添加到开始位置

　　 para.insertBefore(element,element);

3 移除已存在的元素

　　要移除一个元素，你需要知道该元素的父元素

　　parent.removeChild(child);

4 替换 HTML 元素 - replaceChild()

示例：创建删除元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>创建删除元素</title>
  6. <style>
  7. 	#box div{border: 1px solid #ddd;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="box">
  12. 	<p id="p1">原来的元素1</p>
  13. 	<p id="p2">原来的元素2</p>
  14. </div>	
  15.  
  16. <script>
  17. var box=document.getElementById('box');
  18. var p1=document.getElementById('p1');
  19. var p2=document.getElementById('p2');	
  20.  
  21. //创建元素
  22. var div1=document.createElement('div');
  23. div1.innerHTML='新添加元素1';
  24. div1.style.color='red';
  25. div1.onclick=function(){
  26. 	alert();
  27. }
  28.  
  29. //追加新元素到尾部
  30. box.appendChild(div1);
  31.  
  32. //将新元素添加到开始位置
  33. var div2=document.createElement('div');
  34. div2.innerHTML='新添加元素2';
  35. box.insertBefore(div2,p1);
  36.  
  37. //删除元素
  38. box.removeChild(p2);
  39.  
  40. </script>
  41.  
  42. </body>
  43. </html>

DOM操作（二）对元素的操作（创建，追加，删除）的更多相关文章

  1. Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）

    前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...

  2. selenium常用操作，查找元素，操作Cookie，获取截图，获取窗口信息，切换，执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

  3. go语言使用go-sciter创建桌面应用(二) ui元素查找，增加，删除，修改

    我们可以通过go-sciter给我们提供的方法,方便的对html,css编写的UI界面进行增删改查. demo3.go代码如下: package main; import ( "github ...

  4. AIR文件操作(二):使用文件对象操作文件和目录

    转载于:http://www.flashj.cn/wp/air-file-operation2.html 文件对象是啥?文件对象(File对象)是在文件系统中指向文件或目录的指针.由于安全原因,只在A ...

  5. python操作文件和目录查看、创建、删除、复制

    python内置了os模块可以直接调用操作系统提供的接口函数,os.name查询的是操作系统,‘nt’表示windows系统 >>> import os >>> o ...

  6. MySQL 系列（二） 你不知道的数据库操作

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 本章内容: 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网 ...

  7. Java文件File操作一：文件的创建和删除

    一.简述 File 文件类,主要对文件进行相关操作.常用的File操作有:文件(夹)的创建.文件(夹)的删除,文件的读入和下载(复制)等: 二.文件(夹)的创建和删除 1.创建过程 实例: //cre ...

  8. Python创建、删除桌面、启动组快捷方式的例子分享

    一.Python创桌面建快捷方式的2个例子 例子一: 代码如下: import osimport pythoncomfrom win32com.shell import shell    from w ...

  9. SQL Sever实验一 创建和删除数据库数据表

    一． 实验目的 1． 熟悉SQL    Server    2008    中SQL    Server    Management    Studio的环境 2． 了解SQL    Server   ...

  10. c++动态数组的优点，创建和删除

    动态数组可以有两种使用方式: 1:不能预先知道数组的大小使用动态数组 传统数组(静态数组)是需要在程序运行前,就指定大小,比如说 int i = 10; int a[i]; 这种就是不合法的. 因为函 ...

随机推荐

  1. 【Lintcode】028.Search a 2D Matrix

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  2. Oracle中的float类型字段

    Oracle中的float类型对应着C#中的decimal类型

  3. shell 统计词频脚本

    #!/bin/bash if [ $# -ne 1 ]; then echo "Usage:$0 filename"; exit -1 fi filename=$1 egrep - ...

  4. saltstack其他运行模式

    除了常规的运行模式外,salt还有几种运行模式 salt-call --local可以直接在minion上自执行,多用于本机自测试,此方式几乎不用,知道即可 [root@linux-node2 ~]# ...

  5. python list列表sort、sorted、reverse排序

    列表排序:sort是修改原列表,sorted提供原列表的一个有序副本 li=[2,1,4,5,0]li.sort() #默认从小到大print li结果:[0, 1, 2, 4, 5] li=[2,1 ...

  6. java面试题汇总（1）

    1)Java 中能创建 volatile 数组吗? 能,Java 中可以创建 volatile 类型数组,不过只是一个指向数组的引用,而不是整个数组.我的意思是,如果改变引用指向的数组, 将会受到 v ...

  7. 【241】◀▶IEW-Unit06

    Unit 6 Advertising 多幅柱子在一幅图中的写作技巧 1.Model1图片分析 The bar chart contains information about the amount o ...

  8. Oracle数据去重

    一.完全重复数据去重方法    具体思路是,首先创建一个临时表,然后将DISTINCT之后的表数据插入到这个临时表中;然后清空原表数据;再讲临时表中的数据插入到原表中;最后删除临时表. 对于表中完全重 ...

  9. JSP+JavaBean+Servlet工作原理实例…

    JSP+JavaBean+Servlet工作原理实例讲解 首先,JavaBean和Servlet虽都是Java程序,但是是完全不同的两个概念.引用mz3226960提出的MVC的概念,即M-model ...

  10. 教程:动手用自己电脑搭建一个网站 (nat123 花生壳 动态域名 个人电脑做服务器)

    先ps一下..今晚试了N种方法,终于找到一个靠谱 免费 好用的方法,来改装自己电脑成为服务器,在外网也能通过域名访问了!!! 需要准备的东西: Tomcat:这个是web容器,其实有了这个就已经让电脑 ...