insertBefore()

insertBefore()insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面,他返回一个指向新增子节点的引用指针:如上所示,节点newNode将被插入元素节点element并出现在节点t

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面,他返回一个指向新增子节点的引用指针:

reference = element.insertBefore(newNode,targetNode);

如上所示,节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出,newNode节点就将被追加为element元素最后一个子节点—–从效果看,这相当于调用appendChild()的方法。

insertBefore()方法通常与createElement()和createTargetNode()方法配合使用,以便把新创建的节点插入到文档树里。

在下例中,某文档有个id属性值是content的元素,这个元素又包含着一个id属性值是fineprint,我们将用createElement()方法创建一个新的文本段元素,再把新建元素插入到content元素所包括的fineprint元素的前面:

var container = document.getElement.ById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

如果被插入的元素本身还有子节点,那些子节点也被插入到目标节点里面:

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here cones the fineprint");
para.appendChild(text);
container.insertBefore(para,message);

insertBefore()方法不仅可以用来插入新创建元素,还可以用来挪动文档中的现有节点。

在下例中,某个文档有一个id属相值是content的元素,在这个元素有包含一个id属性值是fineprint的元素,在这个文档的其他地方还有一个id属性值是headline的元素。在找这个元素后,最后一条语句把headline元素移动到content的元素所包含的fineprint元素的前面:

var container = document.getElementById("content");
var messge = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement,message);

注意,id属性值是headline的元素将先从文档书上面被移除,然后再被重新插入到新的位置,即content元素所包含的fineprint元素前面。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/167624.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MGN网络详解以及代码分析「建议收藏」

    MGN网络详解以及代码分析「建议收藏」MGN网络详解以及代码分析最近阅读了云从科技最新的关于REID的论文以及相关的博客和代码,算法是基于MGN,关于网络的部分,这里记录一些自己的学习笔记。以下是我参考的博客和代码的网址博客:https://blog.csdn.net/Gavinmiaoc/article/details/80840193代码:https://github.com/Gavin666Github/reid-m…

    2022年10月6日
    5
  • java二维数组两种初始化方法[通俗易懂]

    java二维数组两种初始化方法[通俗易懂]写这篇博客的原因是因为从大一学习c语言开始就对二维数组的声明和初始化一直没有搞懂。。。。直到学到了Java依旧搞得不是很清楚。先看一道Java的基础题这道题错误的选项是B.二维数组的初始化的两种方式看了很多网上的博客,大部分都说是三种初始化的方式,我这里将其归为两种,有不同想法的小伙伴可以留言讨论。什么是二维数组:数组是一个容器,用来存储数据的。现在数组中存…

    2022年6月11日
    43
  • vmware虚拟机安装windows10_虚拟机15安装教程win7

    vmware虚拟机安装windows10_虚拟机15安装教程win71.去下载win7原装镜像,推荐去官方网站下载:https://msdn.itellyou.cn/2.这里注意一点,防止下载的镜像可能出现差错,我们使用iHasher检验一下完整性,确定SHA1值跟我们下载的那个SHA1值一样就行3.打开vmware虚拟机,新建虚拟机4.这里我们选择自定义5.兼容性自己选择,可以向下兼容,点击下一步6.选择win7镜像,这里我们选稍后安装操作系统(…

    2022年9月28日
    5
  • 八皇后问题详解(四种解法)

    八皇后问题详解(四种解法)如果你去百度百科八皇后这个问题,你会发现人家也是历史上有头有脸的一个问题,最后一句“计算机发明后就有一万种方式解决这个问题”读起来也让程序猿们很快活。闲话少说,开始阐述我的思路:最无脑的解法一定是八个for遍历,浪费了太多的计算资源在各种无用功上面,我们稍微构思一下:首先如何决定下一个皇后能不能放这里可以有两种思路,第一种是尝试维护一个8*8的二维矩阵,每次找到一个空位放下一个皇后就把对应行列对

    2022年6月30日
    25
  • Flask 框架简单入门

    Flask 框架简单入门Flask框架介绍Flask框架什么是Flask?flask是一种基于python,并且依赖于Jinja2模板引擎(提供网页解析)和WerkzeugWSGI服务(pythonweb应用与web服务之间的接口)的一种微型框架。其中:Jinja2模板引擎:通俗来讲就是服务器接收到用户请求之后,将数据传入HTML文件中后,经过模板引擎的渲染将其呈现在网页中响应给用户。WerkzeugWSGI:pythonweb应用程序是一个被调用的对象,它无法直接与web服务器直接建立联系,所以WS

    2025年11月11日
    5
  • SpringBoot(二十二)整合Mybatis,使用SqlSessionTemplate实现增删改查[通俗易懂]

    SpringBoot(二十二)整合Mybatis,使用SqlSessionTemplate实现增删改查[通俗易懂]在之前这篇基础上进行改造使用JdbcTemplate实现增删改查。SpringBoot版本:2.1.1目录结构如下:pom文件添加依赖,如下:<!–添加依赖以后Mybatis就自动配置好了,可以直接使用,具体自动配置代码到mybatis-spring-boot-autoconfigure包下查看–><!–上一篇博客里添加的spring-boot…

    2022年5月25日
    60

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号