HTML dom中的insertBefore和Jquery中的区别

最新推荐文章于 2021-05-31 01:43:33 发布
最新推荐文章于 2021-05-31 01:43:33 发布
阅读量610 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoekitty/article/details/52577674
版权 
<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button οnclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>

<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>

</body>
</html>


document.getElementById("myList").insertBefore(newItem,existingItem);



jquery中的：

$("button").click(function(){
  $("<span>Hello world!</span>").insertBefore("p");
});


zoekitty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈jQuery before和insertBefore的区别
10-20
下面小编就为大家带来一篇浅谈jQuery before和insertBefore的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery insertBefore( ) 方法
m0_57835615的博客
06-12 1131
通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 HTML 元素。 语法格式： $(content).insertBefore(selector)
jQuery before（）和insertBefore（）示例
一名可爱的技术搬运工
05-22 920
jQuery before（）和insertBefore（）方法都执行相同的任务，在匹配的元素之前添加文本或html内容。 主要区别在于语法。 例如， <div class="prettyBox">I'm a ipman</div> <div class="prettyBox">I'm a ipman 2</div> 1. $（'sel...
HTML DOM insertBefore() 方法
u010865136的专栏
06-15 1668
一、问题    使用系统自己封装的Validator.js进行表单验证时，错误提示信息的位置不是预期的位置，需要修改底层方法，将错误信息提示在正确的位置；二、分析问题    1、追踪代码，找到Validator.js中控制错误信息的代码：    1、错误提示信息的错误位置    g.parentNode.insertBefore(c, g.nextSibling) **作用：将拼接的错误提...
jQuery before和insertBefore区别
taoerchun的专栏
09-30 4726
jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容，写法上有区别 先看一个例子： 在toInsertContent前面插入toInsertContent 实现： $('toInsertContent').insertBefore($('.div1')); 或者 $('.div1').before('toInsertCont
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
jQuery中insertBefore()方法用法实例
10-24
主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
jQuery中DOM树操作之使用反向插入方法实例分析
11-26
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下： 使用反向插入方法 这里我们先把创建的内容插人到元素前面，然后再把同一个元素插人到文档 中的另一个位置。通常，当在...
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
10-21
主要介绍了jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jquery before()和insertBefore()函数实例
行天之路
11-13 1万+
在jquery中，before()和insertBefore()函数都有着一样的功能，一样的目的，也就是添加文本或html内容到匹配元素的前面，其主要的区别在于语法上的区别。   例如： divclass="prettyBox">I'm a ipman/div> divclass="prettyBox">I'm a ipman 2/div> 1 $(‘selector’).bef
jquery的insertBefore(),insertAfter(),after(),before()
black-heart的专栏
06-19 1087
insertBefore():a.insertBefore(b) 　　　　　　　a在前，b在后, 　　　　　　　a：是一个选择器，b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> &...
insertBefore的用法
Meskjei的博客
04-09 3万+
文章目录简介用法参数注意的地方 简介 inserBefore，顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是： Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点 而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。 如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当...
javascript插入before(),after()新DOM方法
dianmo5898的博客
09-28 913
随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展，与此同时DOM等标准也在悄悄的进步，各大浏览器也在悄悄的发展适配新的属性和方法，今天我们来看看Javascript新的DOM的方法 二、before(),after(),prepend(),append()等新增DOM before() before()是个ChildNode方法，也就是节点方法。节点方法对应于...
insertBefore方法，及如何实现insertAfter方法
justforuse的博客
03-08 1万+
js原生方法insertBefore用于在某个元素之前插入新元素 定义： Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。 语法： parentElement.insertBefore(newElement, referElement) 值得注意的是 1. 如果要插入的newElement已经在DOM树中存在，那么执行此方法会将...
javascript insertBefore( )
cvper's world !
03-31 6549
js DOM 操作----insertBefore( ) 的用法；含义：在某个元素之前插入一个新的元素；先来写一个带有三个段落的网页：&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;insertBefore()&lt;/title&
JS insertBefore
Truong的专栏
03-22 1516
语法： oElement = object . insertBefore ( oNewNode , oChildNode ) 参数： oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。 oChildNode :　 可选项。对象(Element)。定位插入点。 oNewNode 被插入到紧贴这个子对象的前面。 返回值： oElement :　 对象(El
JavaScript 插入节点insertBefore()
景上 的博客
07-01 3831
插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法: insertBefore(newnode,node);参数: newnode: 要插入的新节点。 node: 指定此节点前插入节点。实现创建一个新li标签，内容为”php”,并将新创建的li插入到内容为HTML的标签前。<!DOCTYPE HTML> <html> <head>
原生js实现jquery的insertBefore 和insertAfter 方法（四）
飞天代码的博客
05-31 3353
网上实现类似方法都是针对相应dom节点进行操作，但许多情况下，会拼接好相应html以字符串方式直接插入。 前不久做去jquery的时候用到类似方法，这里简单的记录下，直接上代码吧 insertAfter方法实现 //某个元素后插入 insertAfter: function (newElement, targetElement) { targetElement=See...
原生js html insert,js中AppendChild与insertBefore的用法详细解析
weixin_39795845的博客
05-31 595
appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口...
js中insertbefore的用法
最新发布
06-10
上述代码中，我们使用 `createElement()` 方法创建一个新的 `<p>` 元素，并使用 `createTextNode()` 方法创建一个文本节点，然后将文本节点添加到新元素中。最后，我们使用 `insertBefore()` 方法将新元素插入到已有...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值