1,创建元素

document.createElement('要创建的元素名');

2.插入节点

appendChild 和insertBefore

3.删除节点

removeChild  用法 removeChild('要删除的是哪个节点');

例子,将两种节点的对比,以及删除

//插入节点,有两种方式,appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点,位置是在最后面,insertBefore(新节点,已存在节点的位置);插在指定节点里面的第一个节点位置
var oUl=document.createElement('ul');
var oDiv=document.createElement('div');
var oText=document.createTextNode('添加新项:');
var oInpu=document.createElement('input');
var oBtn=document.createElement('button');
var oTxt=document.createTextNode('点击');
var oBtn1=document.createElement('button');
var oTx=document.createTextNode('删除');
function appChd(){
oBtn.appendChild(oTxt);
oBtn1.appendChild(oTx);
oDiv.appendChild(oInpu);
oDiv.insertBefore(oText,oInpu);//insertbefore 添加一个参数是总是报错,得两个参数
//oUl.appendChild(oDiv);
document.body.appendChild(oUl);
document.body.appendChild(oDiv);
document.body.appendChild(oBtn);
document.body.appendChild(oBtn1);
}
appChd();
oBtn.onclick=function(){
var intV=oInpu.value;//获取到的值
var aLi=document.createElement('li');
var intN=document.createTextNode(intV);//创建一个文本节点,把获取到的值,放进去
aLi.appendChild(intN);
//oUl.appendChild(aLi);新添加的节点都放到最后了
if(oUl.childNodes.length==0){ //判断一下,父结点里面的子节点是否存在,如果不存在执行append语句
//alert(1);
oUl.appendChild(aLi);
}else{
oUl.insertBefore(aLi,oUl.firstChild);
}
}
//删除节点 removeChild();
oBtn1.onclick=function(){
if(oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点,oUl.childNodes[i],i可以为任意值
}
}

dom 节点篇的更多相关文章

  1. dom 节点篇 ---单体模式

    <script> var creatTag={ oUl:document.createElement('ul'), oDiv:document.createElement('div'), ...

  2. dom 节点篇---模块

    改写成如下代码: var creatTag=(function(){ //var count=5; var oUl=document.createElement('ul'); var oDiv=doc ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  6. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  7. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

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

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

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

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

随机推荐

  1. unable to boot the simulator,无法启动模拟器已解决

    突然模拟器报错:unable to boot the simulator(无法启动模拟器) 试了好几种解决办法,删除所有的模拟器重启以后再添加,删除钥匙串登陆中的证书,重新安装Xcode都不行 最后通 ...

  2. UICollectionView布局cell的三种方式

    UICollectionViewFlowLayout里面: // 方法一 - (void)prepareLayout{} // 方法二 - (nullable NSArray<__kindof ...

  3. 9.PNG的制作

    1.背景自适应且不失真问题的存在 制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会.       比如: 1.列表的背景图一定,但是列表的高度随着列表 ...

  4. count(*) 与count (字段名)的区别

    count(*) 查出来的是:结果集的总条数 count(字段名) 查出来的是: 结果集中'字段名'不为空的记录的总条数

  5. GreenPlum高效去除表重复数据

    1.针对PostgreSQL数据库表的去重复方法基本有三种,这是在网上查找的方法,在附录1给出.但是这些方法对GreenPlum来说都不管用. 2.数据表分布在不同的节点上,每个节点的ctid是唯一的 ...

  6. Java类加载基本过程

    基本过程:   根据类的全限定名称加载定义类的二进制字节流. 将字节流代表的静态存储结构转化为方法区的运行时数据结构 内存中生成一个代表这个类的java.lang.Class对象,作为方法去这个类的各 ...

  7. python 多进程使用总结

    python中的多进程主要使用到 multiprocessing 这个库.这个库在使用 multiprocessing.Manager().Queue时会出问题,建议大家升级到高版本python,如2 ...

  8. DOS下windows系统查看wifi密码

    DOS下windows系统查看wifi密码 首先,按win+R键,win键如下 弹出框中输入cmd 在弹出界面输入 netsh wlan show profiles 你可以看到你链接过的所有wifi名 ...

  9. openstack七大模块概述

    前言 OpenStack主要由七部分组成,分别是Identify, Image, Network, Compute, Block Storage, Object Storage, Dashboard, ...

  10. 基本shell编程【3】- 常用的工具awk\sed\sort\uniq\od

    awk awk是个很好用的东西,大量使用在linux系统分析的结果展示处理上.并且可以使用管道, input | awk ''  | output 1.首先要知道形式 awk 'command' fi ...