插入操作

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. vue+ivew-admin开发项目,内存占用过大解决办法

    项目用的ivew+admin ivewUI,直接从github上拉下来用的,配置也没改,我们页面比较多,大该30个页面的样子,一启用,我们的电脑就卡了,然后,看一下,内存占用 1.5G+了,我们电脑4 ...

  2. FJOI2019 游记[大概是考完会解封?]

    Day -1 不知不觉就快省选了啊...从NOIP的爆炸到现在也已经过了两个月了啊... 因为高一没有封闭[划] 所以这些内容是翘了课[划]在机房写的 嘛...感觉自己还有好多东西不会啊……这两天一直 ...

  3. 【NOI2019十二省联合省选】部分题简要题解

    Day 1 T1 异或粽子 题意:给出一个长为n的序列,选择K个不完全重合的区间使得每个区间的异或值的总和最大. 题解:先做一个前缀异或和,对于每一个右端点我们记录三元组(l,r,x)表示在左端点在\ ...

  4. OI中一些常见实用的套路【更新中】

    数据结构 在维护树上路径时,如果只是点的独立的加减,可以考虑用括号序来维护(拆成两部分) 需要求树上很多路径中k近/距离和 一类,考虑点分治/在点分树上解决. 子树求和可以转化为DFS序上区间求和 树 ...

  5. 【性能测试】:解决loadrunner执行脚本启动慢的问题

    解决方法更改.net安装目录中一个配置文件machine.config. 该文件位于.net安装目录下v2.0.50727\CONFIG(如C:\Windows\Microsoft.NET\Frame ...

  6. python附录-re.py模块源码(含re官方文档链接)

    re模块 python官方文档链接:https://docs.python.org/zh-cn/3/library/re.html re模块源码 r"""Support ...

  7. OPENERP 新添模块后导致启动不了的问题总结

    自己新的的模块在本地运行OK,上传到服务器后,导致所有用户登录不了,并报“ProgrammingError: column “” does not exist”不存在的错误. 错误原因,自定义模块发生 ...

  8. Java学习之路(五):常见的对象操作

    Object对象 我们先来介绍一下API API(Application Programming Interface):应用程序编程接口 Java API 就是Java提供给我们使用的类,这些类将底层 ...

  9. PHP 中 strlen 获取中英 字符长度 以作以后对比使用

    ANSII编码: 1 长度是3 a 长度是3 ? 长度是3 我 长度是4 ?长度是2 ---------------------------- UTF-8编码: 1 长度是1 a长度是1 ? 长度是1 ...

  10. Javac之关于方法的调用1

    方法的调用从Attr类的visitApply()方法进入,如下: /** Visitor method for method invocations. * NOTE: The method part ...