append()

语法
>父元素.append(子元素)

解释:追加某元素,在父元素中添加新的子元素。子元素可以为:string/element(js对象)/jQuery元素

代码如下:

var oli = document.createElement("li");
oli.innerHTML = "哈哈哈";
$("ul").append("<li>123</li>");
$("ul").append("oli");
$("ul").append($("#app"));

PS:如果追加的是jQuery对象,那么这些元素将从原位置上消失。简单来说,就是一个移动操作。

appendTo()

语法:
>子元素.appendTo(父元素)

解释:追加到某元素,子元素添加到父元素

代码示例:

$("<li>This is the first.</li>").appendTo($("ul")).addClass("active")

PS:要添加的元素同样既可以是string/element(js对象)/jQuery元素

prepend()

语法:
>父元素.prepend(元子素);

解释:前置添加,添加到父元素的第一个位置

$("ul").prepend("<li>This is the first.</li>")

prependTo()

语法:
>子元素.prependTo(父元素);

解释:前置添加,添加到父元素的第一个位置

$("<li>This is the first.</li>").prependTo("ul");

after()

语法:
>兄弟元素.after(要插入的兄弟元素)

解释:在匹配的元素之后插入内容

$("ul").after('<h4>我是一个标题</h4>')

inserAfter()

语法:
>要插入的兄弟元素.inserAfter(兄弟元素);

解释:在匹配的元素之后插入内容

$("<h5>我是一个标题</h5>").inserAfter("ul");

before()

语法:
>兄弟元素.before(要插入的兄弟元素);

解释:在匹配的元素之前插入内容

$("ul").before('<h3>我是一个标题</h3>');

inseBefore

语法:
>要插入的兄弟元素.inseBefore(兄弟元素);

解释:在匹配的元素之前插入内容

$("h5>我是一个标题</h5").inseBefore("ul");

jQuery文档操作之插入操作的更多相关文章

  1. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  2. jQuery 文档操作 - prependTo() ,appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  3. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  4. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  5. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  6. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  7. C# 中使用Word文档对图像进行操作

    C# 中使用Word文档对图像进行操作 Download Files: ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操 ...

  8. MongoDB文档的增删改操作

    上一篇文章中介绍了MongoDB的一些基本知识,同时看到了怎么启动一个MongoDB服务,并且通过MongoDB自带的shell工具连接到了服务器. 这一次,就通过MongoDB shell介绍一下对 ...

  9. jQuery文档就绪事件

    [jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...

  10. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

随机推荐

  1. 垃圾分类API

    ###自从上月开始实行垃圾分类,整个上海人都已经“疯掉”了.那么,我们应该怎么识别什么是“垃圾”呢? 这里,我提供了并整理了几个api,其中包括图像识别,垃圾分类查找,根据关键字或者图片的内容来进行查 ...

  2. 怎样将当前节点从DOM树中移除

    1. 获取到当前节点. 2. 获取到当前节点的父节点. 3. 使用 Node.prototype.removeChild() 移除当前节点. <!DOCTYPE html> <htm ...

  3. lua的数据类型

    Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...

  4. 19-Perl 特殊变量

    1.Perl 特殊变量Perl 语言中定义了一些特殊的变量,通常以 $, @, 或 % 作为前缀,例如:$_.很多特殊的变量有一个很长的英文名,操作系统变量 $! 可以写为 $OS_ERROR.如果你 ...

  5. ajax-springMVC提交表单的方式

    1.request参数提交(Form提交),适用于GET/POST request参数传递都会转换成 id=123&fileName=test.name&type=culture_ar ...

  6. C#进阶之WebAPI(一)

    最近出去面试,被问到关于WebAPI的知识,因为项目中没有单独写过WebAPI,使用的时候是和mvc结合在一起使用的,所以,在我的印象中WebAPI和mvc是差不多的,这种答案当然不能让人满意了,于是 ...

  7. O028、nova-compute 部署 instance 详解

    参考https://www.cnblogs.com/CloudMan6/p/5451276.html   本节讨论 nova-compute ,并详细分析 instance 部署的全过程.   nov ...

  8. EF Code First 数据迁移操作

    打开执行命令窗体 1.EF Code First创建数据库 PM> Install-Package EntityFramework 2.EF Code First数据库迁移 2.1.生成数据库 ...

  9. 网络基础篇之HDLC、PPP(原理)

    一.广域网传输 之前讲解的都是关于局域网的数据传输,这次讲解的是广域网的传输. 广域网简称WAN,是一种跨越超大的.地域性的计算机网络集合.通常跨省.市.甚至一个国家.广域网包括很多子网,子网可以是局 ...

  10. Python——变量的作用域

    原创声明:本文系博主原创文章,转载及引用请注明出处. 1. 在编程语言中,变量都有一定的作用域,用来限定其生命周期,且不同类型的变量作用域不同. 在Python中解释器引用变量的顺序(优先级)为:当前 ...