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

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

2 添加新元素到尾部

　　element.appendChild(para);

将新元素添加到开始位置

　　 para.insertBefore(element,element);

3 移除已存在的元素

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

　　parent.removeChild(child);

4 替换 HTML 元素 - replaceChild()

示例：创建删除元素

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>创建删除元素</title>

<style>

	#box div{border: 1px solid #ddd;}

</style>

</head>

<body>

<div id="box">

	<p id="p1">原来的元素1</p>

	<p id="p2">原来的元素2</p>

</div>	

<script>

var box=document.getElementById('box');

var p1=document.getElementById('p1');

var p2=document.getElementById('p2');	

//创建元素

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

div1.innerHTML='新添加元素1';

div1.style.color='red';

div1.onclick=function(){

	alert();

}

//追加新元素到尾部

box.appendChild(div1);

//将新元素添加到开始位置

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

div2.innerHTML='新添加元素2';

box.insertBefore(div2,p1);

//删除元素

box.removeChild(p2);

</script>

</body>

</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. 浅谈HTML移动Web开发(转)

    一.响应式Web设计 PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能征服显示的固定宽度居中显示,后者则采用百分百. 响应式布局意味着媒体查询,响应式web设计并非新的技术, ...

  2. [hdu4738]求桥模板

    oj问题,待修改,存档. #include<stdio.h> #include<iostream> #include<cstdio> #include<sta ...

  3. 托管C++——在C#中使用C++

    下面就用一个完整的实例来详细说明怎样用托管C++封装一个C++类以提供给C#使用. 现有一个Detector类需要使用,首先,要创建一个托管C++的DLL工程DAADll,然后在里面添加下面的代码: ...

  4. Biopython常用功能模块

    Biopython项目是旨在减少计算生物学中代码重复的开源项目之一,由国际开发人员协会创建. 它包含表示生物序列和序列注释的类,并且能够读取和写入各种文件格式(FASTA,FASTQ,GenBank和 ...

  5. python3.5 使用tkinter 和requests库实现天气图像化显示

    1 """ 该python小例子考察使用了tkinter库,requests库 其中: requests库用来发送网络请求 thkinter用来显示图形化界面 请求的天气 ...

  6. ue4-C++中加载一个蓝图类（二）-C++中绑定Blueprint武器

    editor中编辑好一个武器蓝图资源后,c++中create出这个武器,然后attach到一个人物身上. 思路:  写个c++基类,蓝图继承后编辑成武器或其他装备,然后c++用一个TSubclassO ...

  7. ffmpeg h264转h265

    ffmpeg -i d:\soft\720p.mp4 -c:v libx265 -b:v 5000k d:\soft\myvideo.mp4 这里码率是5000k,编码是h265 h265的解码貌似用 ...

  8. U3D Shader基础

    http://blog.sina.com.cn/s/blog_471132920101dcnr.html 转载自风宇冲Unity3D教程学院 一个SubShader(渲染方案)是由一个个Pass块来执 ...

  9. 以太坊开发教程（一） truffle框架简介/安装/使用

    通常一个DAPP的开发包括两部分:智能合约的开发和提供合约进行调用的前端页面. truffle提供了对这两部分内容比较简单的开发方式,特别是在开发/测试阶段.给开发人员提供快捷的打包/部署,已经本地服 ...

  10. 2014-10-24 NOIP欢乐赛

    10-24NOIP欢乐赛 ——By 潘智力 题目名称 分火腿 无聊的会议 班服 时间限制 1s 1s 1s 内存限制 64MB 128MB 128MB 输入文件 hdogs.in meeting.in ...