首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别,整理成表格,省的每次都要翻: jQuery方法 解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...append() 在被选元素的结尾(仍然在内部)插入指定内容 appendTo() 在被选元素的结尾(仍然在内部)插入 HTML 标记或已有的元素。...prepend() 在被选元素的开头(仍然在内部)插入指定内容 prependTo() 在被选元素的开头(仍然在内部)插入 HTML 标记或已有的元素 千言解释不如一图示意: 具体代码: This is the target div to which new elements are associated using jQuery var $...').prependTo($target); $('or insertBefore').insertBefore($target

1.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Jquery基础之DOM操作

    DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下: ("ul").append(       添加后页面中能看到"·苹果",右键查看页面源码发现新加的文本节点没有...三、增--添加DOM节点       动态新建元素不添加到文档中没有实际意义,将新建的节点插入到文档中有多个方法,如下:append()、appendTo()、prepend()、prependTo()...4、prependTo()方法       prependTo()方法将元素添加到每一个匹配的元素内部前置,方法如下:$(element).prependTo();例:       $("西瓜").prependTo("ul");       该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个子节元素。     ...四、删--删除DOM节点操作       如果想要删除文档中的某个元素JQuery提供了两种删除节点的方法:remove()和empty();     1、remove()方法       remove

    10110

    JQuery——动态添加元素导致点击事件失效

    前言 因为博皮当前版本有人反馈文章中标题导航点击无法生成; jquery-click-invalid: https://codesandbox.io/s/jquery-click-invalid-forked-xpt352...内容 一开始我以为是svg导致的点击事件失效,但是看来下代码结构,发现两者并不关联; 开始觉得问题应该出现在.html()方法上,因为文章这块在博皮上是没做什么调整的,所以直接看博客园的blog-common.min.js...; 通过显示目录导航关键字进行搜索,就发现了关键之处,JQuery动态的添加元素,导致事先绑定的click事件失效了,因为.click只适用于静态元素; ?...> 既然问题找到了,那修复起来就很快了; 因为我们无法改变blog-commom.min.js,所以通过改变自己博皮代码进行修复; 原来代码 通过.html()进行组合,这样导致button对应的click...}else{ i--; } }) } })(); 修复代码 通过.prependTo

    13510

    JQuery干货篇之操控DOM

    作者说 JQuery干货篇之插入元素 本次使用的html,css还是我上一篇的源代码,详情请看上一篇文章 分类 插入子元素:append,prepend ,appendTo,prependTo 封装包裹元素...,这个在后面的插入元素起到关键作用,如果在要引用html中的一个标签内容的话,不使用clone方法,那么就会将这段内容移动,因此这里使用clone会很方便,详细请看append的用法实例 实例:...1 $("div.dcell").clone(); //这里的clone方法必须是JQuery对象调用 使用DOM API创建新元素 DOM API是用js操作的,其实jquery在幕后悄悄的调用...对于 .prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数。...而 .prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。

    97910

    jQuery基础

    如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); $("#test").html() 意思是指:获取ID...其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML;...虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定:如果获取的是 jQuery...这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 <!...) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件) 增加两个插件方法: <input

    2.1K60

    jQuery 常用方法

    Ajax 交互 选择器 符号$表示 jQuery 对象,$函数通常也被称为 jQuery 的工厂函数,jQuery 的操作基本上都以$( )开始,所有选择器都放在这个括号中,例如$("#title")将返回一个...jQuery 选择的 HTML 元素,在返回 jQuery 对象之后,就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器,通过元素标签名,元素 ID,Class 来查找...选取 ID 为 item 的元素后面的所有 兄弟元素 过滤选择器,主要是通过特定的过滤规则来筛选出所需的 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都以一个冒号:开头...(); 在被选元素的开头插入指定内容 .prepend(); $("p").prepend("love"); 在被选元素的开头插入指定内容 .prependTo(); $("love...").prependTo("p"); 再次元素之后添加元素 .after(); 将此元素添加到(参数)的后面 .insertAfter(); 在每个匹配的元素之前添加元素 .before();

    2.6K50

    1-选择器与DOM对象

    至于0 为什么没有弹出(这个例子用上面提到的在线网站无法验证, 因为那个网站提前会将JS引入),因为在alert("0")的时候,jquery库还没引入进来。...此方法仅在DOM树中向下遍历一层。 2.2, parent() 函数 向上遍历DOM树,用于搜索每个指定元素的直接亲元素。这个和children()函数的遍历范围是一样的,都是遍历一层。...对象的一个方法,用于访问指定元素的文本内容。...该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。 但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。...// 但不会将其从jQuery对象中移除,因此我们还可以使用该jQuery对象,将n6再次放入文档中 $n6.prependTo("body"); 结果是: [span#n6][span#n7] 段落内容

    2.9K110

    好久不用 jQuery, 来复习一下

    遍历方式 /* * index:就是元素在集合中的索引 * element:就是集合中的每一个元素对象 * this:集合中的每一个元素对象 * 如果当前 function 返回为 false,则结束循环...而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。...要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。...示例:(windows).load(function() {}) 1.6.2 标准事件绑定 ☞ 语法 // 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为 jq对象.事件方法(回调函数); ☞...示例 // 提交表单 form.submit(); 1.6.3 其他事件绑定 // 绑定事件 jq对象.on("事件名称",回调函数) // 解除绑定,如果off方法不传递任何参数,则将组件上的所有事件全部解绑

    5.5K40

    jQuery原理(DOM操作相关方法)

    empty方法 清空指定元素中的所有内容。也就是遍历内容,然后将其innerHTML清空。...将元素添加到指定元素内部的最后 如果指定元素有多个,会将元素拷贝多份添加到指定元素中 给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加 给appendTo方法传递jQuery对象...,会将元素添加到jQuery对象保存的所有指定元素中 给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中 appendTo: function (sele) { // 1...与appendTo方法一模一样,只不过将添加方法换成了insertBefore。 prependTo: function (sele) { // 1....insertBefore方法 将元素添加到指定元素外部的前面 insertBefore: function (sele) { // 1.统一的将传入的数据转换为jQuery对象 var

    55020
    领券