jquery 插入节点
<body>
<button id="bt1">点击通过jQuery的append添加元素</button>
<div class="content"></div> <script type="text/javascript">
$("#bt1").on('click', function() {
//.append(), 内容在方法的后面,
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})
</script>
</body>
<body>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<div class="content"></div>
<script type="text/javascript"> $("#bt2").on('click', function() {
//.appendTo()刚好相反,内容在方法前面,
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
}) </script>
</body>
<body>
<button id="bt1">点击通过jQuery的before添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
</body>
<body>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
</script>
</body>
<body>
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
<div class="aaron">
<p class="test1">测试insertBefore,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
</script>
</body>
<body>
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
<div class="aaron">
<p class="test2">测试insertAfter,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
</script>
</body>
<body>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<div class="aaron1">
<p>测试prepend</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在aaron1的首位置添加一个新的p节点,跟append位置相反
$('.aaron1').prepend('<p>prepend增加的p元素</p>')
})
</script>
</body>
<body>
<div class="aaron2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
})
</script>
</body>
jquery 插入节点的更多相关文章
- jQuery插入节点(移动节点)
jQuery插入节点(移动节点) <%@ page language="java" import="java.util.*" pageEncoding=& ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- jQuery插入节点的方法
注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容: HTML代码:<p>我想说:</p>jQuery代码:$(" ...
- jquery 插入节点的方法
方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码: <p>我想说:</p> jQuery代码: $("p").append(& ...
- jQuery元素节点的插入
jquery插入节点的的方法,总的来说有8种,但是只要学会了其中的两个就能理解全部了, 这里我们学习append()和appendTo()两个方法: append()方法是向元素的内部追加内容: &l ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- jquery插入,复制、替换和删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Jquery | 外部插入节点
after(content) : //在 span 元素外部的后面 插入 "<span><b>Write Less Do More</b><span ...
随机推荐
- Hadoop源码解读系列目录
Hadoop源码解读系列 1.hadoop源码|common模块-configuration详解2.hadoop源码|core模块-序列化与压缩详解3.hadoop源码|core模块-远程调用与NIO ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- 玩转 SpringBoot 2 快速整合 Filter
概述 SpringBoot 中没有 web.xml, 我们无法按照原来的方式在 web.xml 中配置 Filter .但是我们可以通过 JavaConfig(@Configuration +@Bea ...
- 微信公众号开发 token 验证程序
<?php traceHttp(); define("TOKEN", "gmll001"); $wechatObj = new wechatCallbac ...
- C语言环境搭建
UNIX/Linux 上的安装 如果您使用的是 Linux 或 UNIX,请在命令行使用下面的命令来检查您的系统上是否安装了 GCC: $ gcc -v 如果您的计算机上已经安装了 GNU 编译器,则 ...
- STVD使用printf输出数据错误
使用STM8L052输出调试信息 重定向put char #include "stdio.h" //必不可缺少 char putchar (char c) { /* Write a ...
- Python 基础 常用运算符
Python 基础 常用运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算术运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算. 今天我们暂只学习 算术运算. ...
- 基于vue的分页插件
相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...
- windows 10 如何设定计划任务自动执行 python 脚本?
我用 python 写了一些脚本,有一些是爬虫脚本,比如爬取知乎特定话题的热门问题,有一些是定期的统计分析脚本,输出统计结果到文档中.之前我都是手动执行这些脚本,现在我希望如何这些脚本能自动定时执行. ...
- Linux 服务器 关闭FTP匿名访问
service vsftpd status //查看FTP运行状态 vim /etc/vsftpd/vsftpd.conf //修改配置文件 找到vsftpd.conf中的 anonymous_ena ...