DOM基础操作(二)
插入操作
1.appendChild(child);
这个是父级调用的方法,它会将child元素插入到父级里面,而且是放到逻辑后面的位置上。
div.appendChild(text); div.appendChild(comment);
这样div里面就会有一行文本一行注释。
这里如果是我们创建的元素,那么appendChild就是把新元素插入进去,但是如果是DOM里面已经存在的元素,那么appendChild就是把这个已经存在的元素给剪切掉,然后放到新的位置上。
2.insertBefore(a, b);
这个依然是父节点调用的方法,它的意思是将a插入到b前面的位置上,其中b要求是这个父级的子节点。这个方法可以记作为 insert a before b;
var span = document.createElement(‘span’); div.insertBefore(span, comment);
这样我们就把一个span元素插入到了刚才的注释文本前面。
DOM基础操作(二)的更多相关文章
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
- DOM基础(二)
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- javascript DOM基础操作
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...
- Dom基础(二):Dom性能优化
一.尽量将DOM查询做缓存 1 let pElements = document.getElementById('div1') //将dom缓存 2 3 for(let i=0:i<pEleme ...
- Linux基础操作二
编程语言的作用及与操作系统和硬件的关系 编程语言的作用:用来定义计算机程序的形式,程序员用它来编写程序,进而控制其向计算机发出指令,使计算机完成人类布置的任务. 编程语言的作用及与操作系统和硬件的关系 ...
- JavaScript学习 - 基础(六) - DOM基础操作
DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...
- jQuery~DOM基础操作
操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...
- DOM基础操作实战代码
对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解! 1.用DOM动态生成这样一个结构: <div class=”example”> <p class ...
- DOM基础操作(三)
DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...
随机推荐
- [Objective-C语言教程]指针(15)
Objective-C中的指针简单易学.使用指针可以更轻松地执行某些Objective-C编程任务,并且在不使用指针的情况下无法执行其他任务(如动态内存分配). 所以有必要学习指向成为一个完美的Obj ...
- 【性能测试】jmeter的坑(1)——如何在多网卡情况下正确连接
问题现象: 性能测试时,使用的服务器配置了双网卡,windows客户机配置了四网卡,坑爹的配置,内外网的隔离,导致在使用jmeter进行分布式测试的时候总是连接失败. 原因分析: Jmeter采用了r ...
- [性能分析]linux文件描述符
1.什么是文件和文件描述符 Linux中文件可以分为4种:普通文件.目录文件.链接文件和设备文件.1.普通文件是用户日常使用最多的文件,包括文本文件.shell脚本.二进制的可执行和各种类型的数据.l ...
- SAE实践——用SVN命令行同步/提交代码
1. 同步应用到本地 注:首次使用svn需要输入安全认证密码 在终端输入以下命令 svn co https://svn.sinaapp.com/nyhello nyhello替换为自己的应用名称. 用 ...
- ElasticSearch 系列随笔
1.ElasticSearch 常用设置 2.ElasticSearch 从2.2升级到6.2.4碰到的问题 3.ElasticSearch 因为磁盘空间不够引起的数据插入错误.(message [C ...
- [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式
[From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...
- Java LinkedHashMap 逆序遍历
利用 ListIterator<pre name="code" class="java">previous import java.util.Arr ...
- Android的网络编程
1.3主要接口 Android平台有三种网络接口可以使用,他们分别是:java.net.*(标准Java接口).Org.apache接口和Android.net.*(Android网络接口).下面分别 ...
- 最新 IntelliJ Idea 2017 激活方法(转)
转载地址:http://www.cnblogs.com/suiyueqiannian/p/6754091.html 1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入 ...
- QuestaSim自动化仿真之do文件
一.编写基本的do文件 下面按照实际仿真的步骤来说明do文件中需要用到的各个tcl命令. 1.quit -sim ---- 退出原来的仿真工程: 2.cd ---- 设置工作目录的路径,就是仿真工程路 ...