一.创建DOM元素

createElement：document.createElement(' 所要创建的元素标签名')；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input id="txt" type="text"></input>                            /*创建input文字编写内容*/
<input id="btn" type="button" value="获取"></input>      /*按钮获取*/
<ul id="ul1">
</ul>
<script type="text/javascript">
window.onload=function () {
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt');

oBtn.onclick=function()
{
var aLi=document.createElement('li');             /*创建li元素*/
var oLi=oUl.getElementsByTagName('li');           /*需要知道往谁前面插，把ul中所有的li都选出来*/           
aLi.innerHTML=oTxt.value;                             /*将input中的文字添加到li中*/
if (oLi.length>0) {                                      /*兼容性考虑，若ul中本没有li，IE会出错，若本没有li，则先给其添加一个li （appendChild）*/
oUl.insertBefore(aLi,oLi[0]);                     /*将新li插入到数组首元素之前，改变顺序，先加入的元素在前出现*/
}
else
{
oUl.appendChild(aLi);                               /*添加到oUl的子节点下*/
}

}
}
</script>
</body>
</html>

知识点：document.creatChild('标签名')

元素添加到末尾：父级.appendChild（子节点）

插入元素：父级.insertBefore（子节点，在谁之前）

用if...else判断父级开始是否有元素存在来消灭兼容

只创建（creatChild）不添加（appendChild）是看不到效果的，只创建是创建到内存空间中去，添加到父级元素上才有效。

二.删除DOM元素

父级.remove(子节点)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<ul id="ul1">
<li>kebgkejgb<a href="#">删除</a></li>
<li>o84ythou<a href="#">删除</a></li>
<li>565eg<a href="#">删除</a></li>
<li>ohinci<a href="#">删除</a></li>
</ul>
<script type="text/javascript">
window.onload=function () {
var oA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1')

for (var i = 0; i < oA.length; i++) {
oA[i].onclick=function()
{
//删除this.parent
oUl.removeChild(this.parentNode);  
}
}
}
</script>
</body>
</html>

知识点：删除的是<a>的父节点，删除后<li>直接消除，不是隐藏

三.文档碎片

可以提高DOM操作性能（理论上）（几乎看不到）

createDocumentFragment 创建文档碎片

提高插入DOM元素的性能。

javascript之DOM篇二（操作）的更多相关文章

  1. Javascript-- jQuery DOM篇(二)

    DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元 ...

  2. javascript之DOM篇一

    一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...

  3. JavaScript笔记基础篇(二)

    基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...

  4. web前端----JavaScript的DOM（二）

    前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...

  5. JavaScript 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAscript:JavaScript的标准语法.包括变量,表达式,运算符,函数,if语句,for语句等. DOM:文档对象 ...

  6. javascript 之DOM篇

    要怎么样的开场白才能使我有力气再更新学习进度呢?啊啊啊啊啊,表示好累啊~~~默念“棒棒棒,我最棒~”召唤精气神开总结敲字咯.哈哈哈. --------------------------------- ...

  7. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  8. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. oracle表分区详解

    原文来自:http://www.cnblogs.com/leiOOlei/archive/2012/06/08/2541306.html oracle表分区详解 从以下几个方面来整理关于分区表的概念及 ...

  2. mac 安装phpredis扩展

    curl -O https://nodeload.github.com/nicolasff/phpredis/zip/master tar -zxf master cd phpredis-master ...

  3. SQL Server T-SQL高级查询

    name like 'ja%'; select * from student where name not like '%[j,n]%'; select * from student where na ...

  4. Deep Learning Papers Reading Roadmap

    Deep Learning Papers Reading Roadmap https://github.com/songrotek/Deep-Learning-Papers-Reading-Roadm ...

  5. 转 猫都能学会的Unity3D Shader入门指南（二）

    猫都能学会的Unity3D Shader入门指南(二) 关于本系列 这是Unity3D Shader入门指南系列的第二篇,本系列面向的对象是新接触Shader开发的Unity3D使用者,因为我本身自己 ...

  6. Database,Uva1592

    Peter studies the theory of relational databases. Table in the relational database consists of value ...

  7. day 2

    三目运算符 A?B:C 等价于 if(A) B; else C; 实例: int i: i=(3>2?5:1)  //如果3>2为真,i的值为5,否则为1 printf(“%d”,i): ...

  8. (九)errno和perror、标准IO

    3.1.6.文件读写的一些细节3.1.6.1.errno和perror(1)errno就是error number,意思就是错误号码.linux系统中对各种常见错误做了个编号,当函数执行错误时,函数会 ...

  9. Delphi 使用之dll文件生成与调用

    DLL是Dynamic-Link Libraries(动态链接库)的缩写,库里面是一些可执行的模块以及资源(如位图.图标等).可以认为DLL和EXE基本上是一回事,只是DLL不能直接执行,而必须由应用 ...

  10. jquery中通过全局变量来禁止多次ajax请求

    var ajaxstate=false;//定义全局变量,通过这个变量来获得当前的ajax状态 $(function(){ $(document).ajaxStart(function(){ $(&q ...