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. ZOOKEEPER进阶

    集群个数: 2n+1,因为集群当宕机大于等于二分之一的机子时,集群选举会失败.故 2n+1台机器和3n台机器可靠性相同 Leader的作用: 为了实现各个节点数据的一致性,需要一个负责协调数据同步的操 ...

  2. 【weixin】微信企业号和公众号区别和关系是什么?

    在移动互联网快速发展和智能手机普遍应用的时代环境下,随着微信平台应用不断扩大和微信用户的迅速增加,微信公众号运营也有了很大的发展,企业.机构和个人纷纷迈入微信公众号运营的行列.微信公众号就是在微信公众 ...

  3. nginx之配置

    1)反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端, ...

  4. 关于Webpack打包报错Class constructor FileManager cannot be invoked without 'new'

    前端代码部署一直是自己打包之后将文件用FileZilla上传到服务器上,现在改用运维基于到k8s docker镜像的发布,前端打包报错如下: 经查资料,报错原因是less升级导致的Bug 尝试升级le ...

  5. IIS 6.0 PUT上传 任意文件创建漏洞

    IIS 6.0 PUT上传 任意文件创建漏洞 require 1.IIS Server在Web服务扩展中开启了WebDAV. 2.IIS配置了可以写入的权限,包括网站 1.根目录 2.子文件夹 3.i ...

  6. Python中文分词组件 jieba

    jieba "结巴"中文分词:做最好的Python中文分词组件 "Jieba" Feature 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分 ...

  7. Vue异步请求最佳实践

    一.当前存在的问题 目前项目前端请求后台数据的方式是这样的: 页面中method中dispatch到action action调用mutation,请求axios 请求到数据后存储到state中 页面 ...

  8. 面向对象相关概念与在python中的面向对象知识(魔法方法+反射+元类+鸭子类型)

    面向对象知识 封装 封装的原理是,其成员变量代表对象的属性,方法代表这个对象的动作真正的封装是,经过深入的思考,做出良好的抽象(设计属性时用到),给出“完整且最小”的接口,并使得内部细节可以对外透明( ...

  9. Linux内核网络报文简单流程

    转:http://blog.csdn.net/adamska0104/article/details/45397177 Linux内核网络报文简单流程2014-08-12 10:05:09 分类: L ...

  10. SQL语句复习【专题六】

    SQL语句复习[专题六] 用户 + 创建表  --创建一个新的用户,然后给新的用户创建一张表,然后给表中添加一些数据.查询表中的数据 --创建用户需要比较大的权限 DBA create user di ...