插入操作

1.appendChild(child);

这个是父级调用的方法,它会将child元素插入到父级里面,而且是放到逻辑后面的位置上。

   div.appendChild(text);  div.appendChild(comment);  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这样div里面就会有一行文本一行注释。

这里如果是我们创建的元素,那么appendChild就是把新元素插入进去,但是如果是DOM里面已经存在的元素,那么appendChild就是把这个已经存在的元素给剪切掉,然后放到新的位置上。

2.insertBefore(a, b);

这个依然是父节点调用的方法,它的意思是将a插入到b前面的位置上,其中b要求是这个父级的子节点。这个方法可以记作为 insert a before b;

   var span = document.createElement(‘span’);  div.insertBefore(span, comment);  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这样我们就把一个span元素插入到了刚才的注释文本前面。

DOM基础操作(二)的更多相关文章

  1. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  2. DOM基础(二)

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  3. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  4. Dom基础(二):Dom性能优化

    一.尽量将DOM查询做缓存 1 let pElements = document.getElementById('div1') //将dom缓存 2 3 for(let i=0:i<pEleme ...

  5. Linux基础操作二

    编程语言的作用及与操作系统和硬件的关系 编程语言的作用:用来定义计算机程序的形式,程序员用它来编写程序,进而控制其向计算机发出指令,使计算机完成人类布置的任务. 编程语言的作用及与操作系统和硬件的关系 ...

  6. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  7. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  8. DOM基础操作实战代码

    对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解! 1.用DOM动态生成这样一个结构: <div class=”example”> <p class ...

  9. DOM基础操作(三)

    DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...

随机推荐

  1. [Objective-C语言教程]Posing(29)

    Posing,顾名思义,意思是“冒充”,它跟categories类似,但本质上不一样,Posing存在的目的在于子类可以冒充父类,使得后续的代码无需把父类修改为子类,就可以很方便的让父类表现成子类的行 ...

  2. 为什么 React Elements 会有 $$typeof 这个属性?

    简评:debug 的时候看到 element 对象中有 $$typeof 这属性,于是查了一下这到底干嘛的. 我们知道,通过 JSX 创建一个 React Elements 时: <marque ...

  3. Common xaml controls(补交作业)

    Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...

  4. Java_锁Synchronized

    锁(synchronized):既然线程之间是并发执行,就必然会有资源冲突的时候,如果不加以限制,很可能会出现死锁现象,这时就需要锁来对线程获取资源的限制程序中,可以给类,方法,代码块加锁.1.方法锁 ...

  5. Es6 类class的关键 super、static、constructor、new.target

    ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...

  6. Optional类

    参照: 一篇简单使用介绍 官网详细用法介绍 包含各种例子的cheetsheet 一个封装某个value的容器 一般可用于方法返回值类型,提醒调用方,这个值可能为null,所以需要处理(因为空指针异常是 ...

  7. 编程开发之--java多线程学习总结(4)

    3.使用锁机制lock,unlock package com.lfy.ThreadsSynchronize; import java.util.concurrent.locks.Lock; impor ...

  8. 一个好用的ssh终端:MobaXterm

    WSL由于没有图形界面,所有操作都是在命令行里执行,平时用来编译和跑CFD代码其实还是挺方便.不过有时候要查看WSL里的文件就比较麻烦,这时可以用SFTP这类工具,连接过去后直接操作文件.试过几个这类 ...

  9. Python pip离线部署

    因为生产环境不能联网,必须使用离线部署pip包,倒也不用部署Pypi镜像那么大工作量,其实蛮简单的,贴出了备忘 pip download -r requirements.txt -d packages ...

  10. solr 服务搭建

    1.  linux 中 安装jdk,  tomcat, 2. 下载 solr-4.10.3.tgz.tgz 并解压 解压后文件夹:solr-4.10.3 3. 将 solr-4.10.3/dist 下 ...