jQuery文档操作之插入操作
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文档操作之插入操作的更多相关文章
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery 文档操作 - prependTo() ,appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- C# 中使用Word文档对图像进行操作
C# 中使用Word文档对图像进行操作 Download Files: ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操 ...
- MongoDB文档的增删改操作
上一篇文章中介绍了MongoDB的一些基本知识,同时看到了怎么启动一个MongoDB服务,并且通过MongoDB自带的shell工具连接到了服务器. 这一次,就通过MongoDB shell介绍一下对 ...
- jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
随机推荐
- 垃圾分类API
###自从上月开始实行垃圾分类,整个上海人都已经“疯掉”了.那么,我们应该怎么识别什么是“垃圾”呢? 这里,我提供了并整理了几个api,其中包括图像识别,垃圾分类查找,根据关键字或者图片的内容来进行查 ...
- 怎样将当前节点从DOM树中移除
1. 获取到当前节点. 2. 获取到当前节点的父节点. 3. 使用 Node.prototype.removeChild() 移除当前节点. <!DOCTYPE html> <htm ...
- lua的数据类型
Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...
- 19-Perl 特殊变量
1.Perl 特殊变量Perl 语言中定义了一些特殊的变量,通常以 $, @, 或 % 作为前缀,例如:$_.很多特殊的变量有一个很长的英文名,操作系统变量 $! 可以写为 $OS_ERROR.如果你 ...
- ajax-springMVC提交表单的方式
1.request参数提交(Form提交),适用于GET/POST request参数传递都会转换成 id=123&fileName=test.name&type=culture_ar ...
- C#进阶之WebAPI(一)
最近出去面试,被问到关于WebAPI的知识,因为项目中没有单独写过WebAPI,使用的时候是和mvc结合在一起使用的,所以,在我的印象中WebAPI和mvc是差不多的,这种答案当然不能让人满意了,于是 ...
- O028、nova-compute 部署 instance 详解
参考https://www.cnblogs.com/CloudMan6/p/5451276.html 本节讨论 nova-compute ,并详细分析 instance 部署的全过程. nov ...
- EF Code First 数据迁移操作
打开执行命令窗体 1.EF Code First创建数据库 PM> Install-Package EntityFramework 2.EF Code First数据库迁移 2.1.生成数据库 ...
- 网络基础篇之HDLC、PPP(原理)
一.广域网传输 之前讲解的都是关于局域网的数据传输,这次讲解的是广域网的传输. 广域网简称WAN,是一种跨越超大的.地域性的计算机网络集合.通常跨省.市.甚至一个国家.广域网包括很多子网,子网可以是局 ...
- Python——变量的作用域
原创声明:本文系博主原创文章,转载及引用请注明出处. 1. 在编程语言中,变量都有一定的作用域,用来限定其生命周期,且不同类型的变量作用域不同. 在Python中解释器引用变量的顺序(优先级)为:当前 ...