DOM基础操作（二）

插入操作

1.appendChild(child);

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

 1  div.appendChild(text); 2 div.appendChild(comment);

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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

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

2.insertBefore(a, b);

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

 1  var span = document.createElement(‘span’); 2 div.insertBefore(span, comment);

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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

更多专业前端知识，请上【猿2048】www.mk2048.com

DOM基础操作（二）相关推荐

深度学习（6）TensorFlow基础操作二: 创建Tensor
深度学习(6)TensorFlow基础操作二: 创建Tensor 一. 创建方式 1. From Numpy,List 2. zeros,ones (1) tf.zeros() (2) tf.zero ...
前端基础（二十三）：DOM基础操作
原生JavaScript-DOM基础操作 getAttribute setAttribute childNodes 空格换行也会被算作节点 attributes nodeType 元素节点-1 属性节 ...
Python爬虫基础操作二
目录四.爬虫数据存储csv/excel 五.session与cookies 六.selenium库:控制浏览器操作七.定时与邮件上一篇爬虫操作基础,本篇讲解爬虫数据存储.cookies,sess ...
图像处理基础操作二（边缘检测、轮廓检测、光流估计）
目录一.边缘检测二.图像金字塔三.图像轮廓检测 1.绘制图像轮廓 2.轮廓近似绘制 3.画轮廓边界矩形框 4.画轮廓外接圆四.背景建模五.光流估计一.边缘检测边缘检测通常是在保留原有图像 ...
Linux基础操作二
编程语言的作用及与操作系统和硬件的关系编程语言的作用:用来定义计算机程序的形式,程序员用它来编写程序,进而控制其向计算机发出指令,使计算机完成人类布置的任务. 编程语言的作用及与操作系统和硬件的关系 ...
UE5学习笔记01（基础操作二）
1.Outliner被翻译成"大纲". 2.当按住Shift键移动一个物体时,摄像机会追随被移动的物体,形成一种第三人称视角的感觉. 3.在Outliner中选择一个或者多个物体之 ...
自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
MySQL数据库的基础操作
文章目录一.数据库的基础操作二.数据表的基础操作 1.数据表的创建 2.数据表数据的插入 2.数据表的查询 3.数据表的更新 4.数据表的数据删除我使用的是MySQL数据库专用软件MySQL5. ...
JavaScript进阶（二）-- DOM基础
目录 1. DOM简介 1.1 什么是 DOM 1.2 DOM 树 2. 获取元素 2.1 如何获取页面元素 2.2 根据 ID 获取 2.3 根据标签名获取 2.4 通过 HTML5 新增的方法获取 ...

DOM基础操作（二）

插入操作

DOM基础操作（二）相关推荐

最新文章

热门文章