插入操作

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. 关于android分辨率兼容问题

    关于手机分辨率相关术语和概念 屏幕尺寸:实际的物理尺寸,屏幕的对角线测量.为了方便,android把所有的屏幕尺寸分为了4个广义的大小:小,正常,大,特大. 屏幕密度:屏幕的物理面积内像素的数量,通常 ...

  2. day 14 自定义模块,常用模块 time .datetime ,time 模块

    内容大纲 一:Import  模块 1,创建一个以tbjx命名的名称空间 2,执行此模块的代码,并将所有内容加载到内存 3,调用此模块的代码要通过tbjx.的方式 二:from 包 import 模块 ...

  3. web环境中的spring MVC

    1. web.xml文件的简单详解 在web环境中, spring MVC是建立在IOC容器的基础上,要了解spring mvc,首先要了解Spring IOC容器是如何在web环境中被载入并起作用的 ...

  4. C#-WebForm-组合查询(Queryable延迟查询、Intersect交集)、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

  5. 【Jenkins】定时构建语法

    跟cron定时任务语法基本类似 一.字段有哪些 每行包含5个字段,用制表符或空格隔开,从左至右依次是: 分 时 天 月 星期 二.每个字段的取值范围 分钟 (0–59) 时 (0–23) 天 (1–3 ...

  6. hibernate调用mysql自己手动创建函数报错

    split为自己手动在mysql中创建的函数,在hibernate调用时出错,解决方案如下: jdbc调用可以.不用改hibernate的方言. 正常的为:

  7. C# GDI+开发手记

    创建画布画字体文字区域内居中换行文字在整个画布中居中画直线画圆形头像压缩保存图片缩放旋转单位换算 创建画布 Bitmap image = new Bitmap(640, 1136, PixelForm ...

  8. Universal-Image-Loader完全解析(下)

    Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...

  9. Mac 10.12安装XMind

    下载: (链接: https://pan.baidu.com/s/1i4FmspJ 密码: ydc2)

  10. (转)MySQL 主从复制搭建,基于日志(binlog

    原文:http://blog.jobbole.com/110934/ 什么是MySQL主从复制 简单来说,就是保证主SQL(Master)和从SQL(Slave)的数据是一致性的,向Master插入数 ...