js之DOM操作（插入节点insertBefore()）

最新推荐文章于 2022-01-05 16:12:49 发布
最新推荐文章于 2022-01-05 16:12:49 发布
阅读量9.8k 收藏 19
点赞数 3
分类专栏： javascript 文章标签： javascript DOM属性 操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010359143/article/details/48624717
版权

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

我们在来看看下面代码，在指定节点前插入节点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>

<ul id="test">
    <li>JavaScript</li>
    <li>HTML</li>
</ul> 
 
<script type="text/javascript">

  var otest = document.getElementById("test");  
  var newnode = document.createElement("li");
  newnode.innerHTML = "java";
  otest.insertBefore(newnode,otest.childNodes[0]);

</script> 

</body>
</html>

运行结果： 
    java
    JavaScript
    HTML


_我就是愛自由
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础_DOM
sandy_star
08-29 113
DOM（文档对象类型） JavaScript 能够改变页面中的所有 HTML 元素、HTML属性、CSS样式、对页面的所有事件作出反应。 查找HTML元素 以下是通过document对象调用，来获取元素节点 通过id查找： var x = document.getElementById("thisid"); //获取元素内部的HTML内容 alert(thisid.innerHTML); 通过标签名查找： getElementByTagName()：可以通过标签名获取一组元素节点对象，这个
JS实现的DOM插入节点操作示例
11-28
本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考，具体如下： 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref) new：表示新的子节点。 ref：指定一个节点，在这个节点前插入新的节点。 二 应用 插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 三 完整示例代码： <!DOCTYPE html> <html> <head> <title>www.jb51.net 插入节点</title>
[js高手之路] dom常用API详解与应用
weixin_33969116的博客
08-23 247
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最...
insertBefore 的详细用法解析
像一阵风
04-23 6933
其中需要注意两点 1.谁去调用此函数 2.函数中的两个参数的意义
JS DOM 编程复习笔记 -- insertBefore、insertAfter、append、prepend（七）
小帅的编程笔记
10-23 908
今天我们来继续来复习DOM的一些插入方法，insertBefore()，append()和prepend()方法。前面我们只用到过一个appendChild()方法。我们一个个看语法和示例，包你看完就会。 insertBefore() insertBefore()用来在指定的DOM节点前插入DOM元素。 语法： parentNode.insertBefore(newNode, existingNode); parentNode为existingNode的父节点 existingNode为已经存在的节点 n
JS——appendChild()和insertBefore()插入新节点区别
专注写bug
01-05 1829
文章目录前言appendChild(newchild)insertBefore(newchild, refchild)参考资料 前言 在html中，如果需要动态的插入数据标签(li、a等)，则需要使用到标题所示的appendChild()或insertBefore()来实现。 这两种方法都具有插入新元素至指定的容器中的功能，但他们却有很大的区别。 appendChild(newchild) appendChild()的字面意思append和child，从起名中可以看出，插入元素的位置为末尾。 向当前节点的
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
本文主要介绍JavaScript中的DOM插入、更新和删除操作。 **1. DOM更新** 更新DOM节点主要包括修改文本内容和修改CSS样式。 - **修改文本内容** - `innerHTML`：这是最常用的方法，可以改变节点内部的HTML内容，...
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
6. `insertBefore`: 在指定子节点之前插入新节点。 7. `removeChild`和`replaceChild`: 分别用于删除和替换子节点。 8. `loadXML`和`load`：加载XML数据到文档中。 9. `save`: 保存XML文件到指定位置。 此外，...
jsDOM基礎insertBefore基本用法
唐昊
03-12 338
<!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript"> window.onload=function(){ var x = document.getElementById('but'); ...
js AppendChild与insertBefore用法详细对比
10-26
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下，希望对大家有所帮助
基于insertBefore制作简单的循环插空效果
12-28
效果图展示： 源码查看 【功能说明】 　　利用insertBefore制作简单的循环插空效果 【HTML代码说明】 <ul class=list id=list> <li class=in>1</li> <li class=in>2</li> <li class=in>3</li> <li class=in>4</li> <li class=in>5</li> <li class=in>6</li> </ul> 【CSS代码说明】 .in{ height: 20px; line-height: 20px; width: 20px;
【JavaScript】添加DOM节点
cxu123321的博客
03-06 623
【JavaScript】添加DOM节点 原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏 展开 HTML DOM树 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 查找节点 通过 id ...
insertBefore()
weixin_30321449的博客
10-31 165
insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面，他返回一个指向新增子节点的引用指针： reference = element.insertBefore(newNode,targetNode); 如上所示，节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个...
js insertBefore方法
u012901416的专栏
06-29 779
[size=medium]语法：[/size] [code="js"]oElement = object . insertBefore ( oNewNode , oChildNode )[/code] [size=medium] 参数： oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。 oChildNode :　 可选项。对象(Element)。定位插...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2968
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
javascript插入before(),after()新DOM方法
dianmo5898的博客
09-28 954
随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展，与此同时DOM等标准也在悄悄的进步，各大浏览器也在悄悄的发展适配新的属性和方法，今天我们来看看Javascript新的DOM的方法 二、before(),after(),prepend(),append()等新增DOM before() before()是个ChildNode方法，也就是节点方法。节点方法对应于...
HTML DOM insertBefore() 方法
u010865136的专栏
06-15 1720
一、问题    使用系统自己封装的Validator.js进行表单验证时，错误提示信息的位置不是预期的位置，需要修改底层方法，将错误信息提示在正确的位置；二、分析问题    1、追踪代码，找到Validator.js中控制错误信息的代码：    1、错误提示信息的错误位置    g.parentNode.insertBefore(c, g.nextSibling) **作用：将拼接的错误提...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
JavaScript DOM编程艺术：创建与操作节点
3. **插入节点**：`appendChild()`用于将新节点添加到父节点的末尾，`insertBefore()`则能在特定现有子节点之前插入新节点。 4. **删除节点**：`removeChild()`方法用于从其父节点中移除指定的子节点。 5. **替换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值