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. dev gridview拖拽数据移动

    设置属性gridView1.OptionsSelection.EnableAppearanceFocusedCell = false; //确保选定行的背景色一样. private BindingLi ...

  2. js变量声明提升

    1.变量提升 根据javascript的运行机制和javascript没有块级作用域这个特点,可以得出,变量会声明提升移至作用域 scope (全局域或者当前函数作用域) 顶部的. 变量声明提升至全局 ...

  3. haproxy实现ssl套接字加密

    概述 如果你的应用使用SSL证书,则需要决定如何在负载均衡器上使用它们. 单服务器的简单配置通常是考虑客户端SSL连接如何被接收请求的服务器解码.由于负载均衡器处在客户端和更多服务器之间,SSL连接解 ...

  4. shell运行下的写日志

    tee 重定向输出到多个文件   在执行Linux命令时,我们既想把输出保存到文件中,又想在屏幕上看到输出内容,就可以使用tee命令 要注意的是:在使用管道线时,前一个命令的标准错误输出不会被tee读 ...

  5. web录音——上传录音文件

    捕获麦克风 一.  前言    公司项目需要实现web录音,刚刚好接手此功能,由于之前未接触过,在网上找了些资料做对比 )   https://www.cnblogs.com/starcrm/p/51 ...

  6. springboot搭建web项目与使用配置文件

    目录 一.准备工作 二.创建基础web项目 1. maven配置 2.创建maven项目.配置pom.xml为web基础项目 3.编写启动类 4.使用maven打包 5.使用命令java -jar x ...

  7. Oracle【多表查询操作(SQL92&SQL99)】

    多表联合查询:需要获取的数据分布在多张表中 SQL92: --笛卡尔积:将多个表的数据进行一一对应,所得的结果为多表的笛卡尔积 select * from emp; select * from dep ...

  8. ORACLE 常用函数学习笔记

    1.字符串截取方法 --5SELECT INSTR('8.30~9.00', '~') FROM dual; --8.30SELECT SUBSTR ('8.30~9.00', 0, INSTR (' ...

  9. [转] - Linux中使用alternatives切换Jdk版本

    1. 准备JDK包,分别是1.7和1.8,jdk-7u79-linux-x64.tar.gz和jdk-8u161-linux-x64.gz: 2. 解压,解压后的目录结构如图所示: JDK1.7: J ...

  10. 四、指定Nginx启动用户

    一.nginx指定启动用户 1.参考宝塔的配置 解释:(linux权限管理) 指定用www用户启动nginx,如果你用root启动nginx,万一nginx有漏洞,被提权了,你服务器就GG了 所以指定 ...