javascript jquery 插入节点方法一览

最新推荐文章于 2023-05-11 12:11:53 发布
最新推荐文章于 2023-05-11 12:11:53 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： JavaScript 介绍
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/110877354
版权
本文主要总结JavaScript和jQuery中插入节点的方法，包括appendChild、insertBefore、before、after、prepend、append等，通过示例代码和插入位置图解帮助区分它们的差异，强调这些方法实际上是移动而非复制节点。
摘要由CSDN通过智能技术生成

插入节点的方法一点都不难, 就是经常记不住, 或者分不清, 所以假定你已经熟练甚至精通这些方法的使用
本篇旨在总结它们的差别, 用法就不详细介绍了

注: before & insertBefore, after & insertAfter 目标节点和操作节点的关系应该是"兄弟关系", 但我觉得以"父子关系"描述更能表达它们的主次关系

javascript

appendChild

父.appendChild(子)

插入位置: 父节点里的最后位置

insertBefore

父.insertBefore(子, undefined)
父.insertBefore(子, 父.children[2])

插入位置: 第二个参数传入父节点的某个子节点, 最终插入到那个子节点的前面;
第二个参数可以为 [undefined, null], 最终插入到父节点里的最后位置(同 appendChild)

jquery

before & insertBefore

$(父).before(子)
$(子).insertBefore(父)

插入位置: 父节点外的前面

prepend & prependTo

$(父).prepend(子)
$(子).prependTo(父)

插入位置: 父节点里的最前位置

append & appendTo

$(父).append(子)
$(子).appendTo(父)

插入位置: 父节点里的最后位置(同 appendChild)

after & insertAfter

$(父).after(子)
$(子).insertAfter(父)

插入位置: 父节点外的后面

以上方法共同特性

  • 如果子节点存在于文档, 子节点会从原位置移动到新位置. 就是说以上方法其实是[移动]而不是[复制]
  • 都会返回子节点, js 返回 js 格式, jq 返回 jq 格式

插入位置图解如下

在这里插入图片描述

demo

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>javascript jquery 插入节点方法一览</title>
	<style>
		* {
     padding: 2
最低0.47元/天 解锁文章
352328759
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
js获取节点操作
weixin_45321331的博客
05-21 1194
123
jQuery insertBefore( ) 方法
m0_57835615的博客
06-12 1156
通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 HTML 元素。 语法格式： $(content).insertBefore(selector)
jQuery（六）-节点操作 :children()、 find()、appendTo、prepend、after、before、insertAfter、insertBefore、wrap...
小白小白从不日别的博客
05-05 2025
三、节点的相关操作
JavaScript（js)节点--父节点、子节点、兄弟节点
Dreamer
11-19 7547
JavaScript（js)节点–父节点子节点 一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。 元素节点 nodeType为1。 属性节点 nodeType为2。 文本节点 nodeType为3。（文本节点包含文字、空格、换行等） 实际开发中节点操作主要操作元素节点。 <ul> <li>我是li1</li> <li>我是li2</li> <li&
DOM插入节点方法
weixin_46736220的博客
04-06 691
内部插入 append() 向每个匹配的元素内部追加内容 ------ (A).append(B) =》在A的里面加入B <p>我想说：</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说：<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定元素中，实际上，使用该方 法是颠倒了常规的$ (A).append(B)的操作
jquery插入兄弟节点的操作方法
10-20
在本文中，我们将深入探讨如何使用jQuery来插入兄弟节点，这将帮助你更好地理解和利用这个强大的JavaScript库来动态地更新网页内容。 1. **`prepend()`** 方法： `prepend()` 方法用于在每个匹配元素的开头插入...
jQuery和JavaScript节点插入元素的方法对比
11-28
本文将对比jQuery和JavaScript在节点插入元素时的不同方法。 首先，我们关注jQuery的方法。jQuery库简化了DOM操作，提供了优雅的语法和高效的性能。对于节点内部插入元素，jQuery有以下四个主要方法： 1. `append...
jQuery插入节点1
08-08
在本文中，我们将详细介绍 jQuery 中的插入节点方法，包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中，可以使用工厂函数 `$()` 来创建节点。例如，`$("<p>")` 将创建...
jQuery与JavaScript节点创建方法的对比
11-26
在网页动态交互中，创建和操作DOM节点是常见的任务，jQuery和JavaScript提供了不同的方式来实现这一目标。本文将深入探讨jQuery与JavaScript在创建节点方面的差异。 首先，理解DOM（Document Object Model）是至关...
JQuery中append和JS中appendChild添加重复元素问题
qq_45955580的博客
04-08 4521
所有的追加元素方法都会去判断这个父元素里面是否拥有这个元素对象，如果拥有则以为已经添加完成，如果没有则添加进去，这也就是为什么我们只添加了一个元素的原因
jq操作节点：append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove、empty、clone（）
YY的博客
11-18 535
append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove（）、empty（）、html（“”）、replaceWith（）、replaceAll（）、clone（）
JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点
Moony_wy的博客
02-07 3956
JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点 node.appendChild(child) 添加到子元素数组的末尾 node.insertBefore(child, 指定元素) 添加到指定子元素的前面 node.removeChild(child) 删除指定子节点，返回删除的节点 cloneNode() 复制节点 复制节点要注意，cloneNode()括号里面为空或是false则为浅拷贝，只复制标签不复制里面的内容。cloneNode(true) 括号里为true则为深拷贝，复制标签和内容
JQuery之append和appendTo的区别，还有js中的appendChild用法
热门推荐
07-16 4万+
JQuery之append和appendTo的区别 append()前面是要选择的对象，后面是要在对象内插入的元素内容  appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象  实例：  $('#a').append('content');  $('content').appendTo($('#a'));  注意appendTo前面一定要是J
JS和JQ中appendChild()相关注意事项
梦凝哲雪
07-19 2388
参考网站 append 案例 //新建一个div元素节点 var div = document.createElement("div"); //创建文本节点 var txt = document.createTextNode("我爱你"); //加文本以子节点形式加入到div元素中 div.appendChild(txt); //把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后 document.body.appendChild(div); 效果 注意事项 1、a
8-BOM和DOM
我的一篇的博客
05-13 441
BOM 什么BOM？ 浏览器对象模型。 BOM中的顶级对象是什么？ window 顶级对象下面有哪些子对象？ document location history navigator frames screen window对象的方法有哪些？ alert() : 警告框 confirm() ：选择框 prompt() ：输入框 open() ：打开新窗口 close() ： 关闭当前窗口 location对象 跳转页面 window.location loc
jQuery的创建和添加元素
赵伟楠——廊坊师范学院信息技术提高班
03-15 784
//1.先创建元素 document.createElement(‘标签名’) //2.将创建的元素添加到父元素中,父元素.appendchild(元素) //jq方式 //1.先创建元素 $('html标签') //2.将创建的元素添加到父元素中 //☞创建的元素.appendTO(父元素) 将创建的元素添加到父元素的末尾 //☞创建的元素.prependTO(父元素) 将创建的元素添加到父元素的开始位置 //代码 // let h3 = $('&
JS中appendChild和insertBefore冲突问题；jQuery中append和prepend冲突问题
最新发布
lonely__snow的博客
05-11 297
解决JS中appendChild和insertBefore冲突问题； jQuery中append和prepend冲突问题，before和after冲突问题
js instanceof 的工作原理细解
352328759的博客
10-31 5140
根据 MDN 的解释 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 s instanceof F 用递归函数来表达, 流程大致如下: function _instanceof(s, F) { if(s.__proto__ === F.prototype) { // 找到目标 return true } else if("__proto__" in F) { // 存在上一层原型1 _instanceof(s, F.__p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值