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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mysql数据库数据迁移操作「建议收藏」

    mysql数据库数据迁移操作「建议收藏」1.新建一个需要迁移的数据库2.进行数据迁移迁移步骤:1.工具–>点击数据传输,选择需要被导的数据库,和导入的数据库看到了吗以及导入成功了

    2022年7月3日
  • mysql数据目录的路径(数据库中的数据不可以共享)

    安装配置指南----------------一、下载SourceOffsiteV4.2官方下载地址,可以试用30天,试用期间无任何功能限制。http://search.newhua.com/search.asp?Keyword=sourceoffsite现在国内也有相关的中文版下载,本人使用没有什么区别,可能就是多一个VSS6.0。如果大家连VSS6.0都没有,就建议下载中文版。二、

    2022年4月13日
  • Quartz入门以及相关表达式使用[通俗易懂]

    Quartz入门以及相关表达式使用[通俗易懂]目的:1、Quartz简介及应用场景2、Quartz简单触发器 SimpleTrigger介绍3、Quartz表达式触发器CronTirgger介绍4、Quartz中参数传递5、S

    2022年7月1日
  • anaconda怎么和pycharm配合使用_pycharm怎么和anaconda结合

    anaconda怎么和pycharm配合使用_pycharm怎么和anaconda结合pycharm与anaconda的结合使用pycharm和anaconda的优点大家都有所了解了,这里我主要说明的是如何使用anaconda创建python的不同环境,在不同环境中安装不同版本包,接着使用pycharm创建项目关联anaconda中我们所创建虚拟环境中的python解释器。Pycharm的安装pycharm的下载地址:网上很多的下载说明,这里就不再赘述,下载最新版即可。Anacondaanconda下载地址登录官网下载最新版即可,完成安装。开始讲解前,我们先明确一下Pytho

    2022年8月27日
  • Struts2拦截器详解

    Struts2拦截器详解成功的花儿,其间浸透了奋斗的泪水和汗水;然而,用泪水和汗水就可以实现一切的美好。Struts2拦截器概述拦截器的概念是在Struts2里面有的。在其它地方没有。Struts2是框架,封装了很多的功能,struts2里面封装的功能都是在拦截器里面。Struts2里面封装了很多的功能,有很多拦截器,不是每次这些拦截器都执行,每次执行默认的拦截器。Struts2里面默认的拦截器位置:struts

    2022年10月7日
  • java 判断一个对象是否为空对象

    java 判断一个对象是否为空对象最近项目中遇到一个问题,在用户没填数据的时候,我们需要接收从前端传过来的对象为null,但是前端说他们一个一个判断特别麻烦,只能传个空对象过来,我第一个想法就是可以通过反射来判断对象是否为空。第一版:User.javapublicclassUser{privateStringusername;privateBooleanactive;priva…

    2022年6月5日

发表回复

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

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