jq中 html append appendto

jq操作html页面常用的有哪些方法：

html方法，给元素添加html代码或者清空html代码（参数为空字符串）；
append向元素的末尾添加html代码；
appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不一样；
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入；
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入；
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
empty清空元素内部的html代码，它只是清空内部的html代码，但是标记仍然留在DOM中；
remove从DOM中移除整个元素；

　　需要指出的重要的一点：JQuery会自动的完善html代码，也就是说，假如你要执行以下操作

[javascript] view plaincopy

$('content').append('<p>CSDN');

[javascript] view plain copy

$('content').append('<p>CSDN');

那么实际插入到标记中的html代码是

[html] view plaincopy

<p>CSDN</p>

[html] view plain copy

<p>CSDN</p>

　　这一点需要特别注意，很多教程之类的只是讲解这些函数的动作，但是会忽略一些细节；

　　下面让我来详细解释一下每个函数的作用以及它是如何工作的，会产生什么效果。以后的代码我都对这样的一个模板来操作，代码以及效果如下：

[css] view plaincopy

<style type="text/css">
.box
{
width:100px;
height:100px;
border:2px solid red;
padding:10px;
text-align:center;
}
.child
{
width:70px;
height:20px;
border:2px solid red;
text-align:center;
}
</style>

[css] view plain copy

<style type="text/css">
.box
{
width:100px;
height:100px;
border:2px solid red;
padding:10px;
text-align:center;
}
.child
{
width:70px;
height:20px;
border:2px solid red;
text-align:center;
}
</style>

[html] view plaincopy

<div id="top" class="box">
<span>top</span>
</div>
<div id="middle" class="box">
<span>middle</span>
</div>
<div id="bottom" class="box">
<span>bottom</span>
</div>

[html] view plain copy

<div id="top" class="box">
<span>top</span>
</div>
<div id="middle" class="box">
<span>middle</span>
</div>
<div id="bottom" class="box">
<span>bottom</span>
</div>

　　原始的效果图：

　　一、html函数的使用

　　我们执行以下语句：

[javascript] view plaincopy

$('#middle').html('<div class="child">html()');

[javascript] view plain copy

$('#middle').html('<div class="child">html()');

　　效果图如下：

　　再来看看最终的代码：

　　这里是完整的html代码，也就是说JQuery为我们补全了代码，这一点需要注意，JQuery为我们带来了方便，但是当我们需要精确控制html代码的时候，需要注意一点。

　　html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。

二、append、appendTo函数的使用

　　执行以下语句：

[javascript] view plaincopy

$('#middle').append('<div class="child">append()</div>');

[javascript] view plain copy

$('#middle').append('<div class="child">append()</div>');

　　注：为了编程规范，html代码我之后都使用完整的html标记。

　　效果图如下：

　　最终的代码：

　　append函数将html附加到了<span>middle</span>之后。

　　appendTo函数的效果和append一样，只不过是写法不一样：

[javascript] view plaincopy

$('<div class="child">append()</div>').appendTo('#middle');

[javascript] view plain copy

$('<div class="child">append()</div>').appendTo('#middle');

　　appendTo首先将html代码封装成jquery对象，然后添加到指定的目标位置。

三、after、insertAfter函数的使用

　　执行以下语句：

[javascript] view plaincopy

$('#middle').after('<div class="child">after()</div>');

[javascript] view plain copy

$('#middle').after('<div class="child">after()</div>');

　　效果图：

　　after函数的作用是将html代码插入指定元素的后面，如果后面有元素，则将其后移，然后插入html代码。

　　insertAfter函数与after函数的作用是一样的，上面代码的insertAfter版本为：

[javascript] view plaincopy

$('<div class="child">after()</div>').after('#middle');

[javascript] view plain copy

$('<div class="child">after()</div>').after('#middle');

　　四、before、insertBefore函数的使用

　　这连个函数的原理与after、insertAfter是一样的，只不过before、insertBefore是插入到目标元素的前面，大家可以自行参考after、insertAfter。

　　五、empty、remove函数的使用

　　执行以下代码：

[javascript] view plaincopy

$('#middle').empty();

[javascript] view plain copy

$('#middle').empty();

　　效果图：

　　再来看看最终的html代码：

[html] view plaincopy

<div id="middle" class="box"></div>

[html] view plain copy

<div id="middle" class="box"></div>

　　里面的html代码被清空了，然而元素本身还在。

　　执行以下语句：

[javascript] view plaincopy

$('#middle').remove();

[javascript] view plain copy

$('#middle').remove();

　　效果图：

　　最终的html代码：

[html] view plaincopy

<div id="top" class="box">
<span>top</span>
</div>
<div id="bottom" class="box">
<span>bottom</span>
</div>

[html] view plain copy

<div id="top" class="box">
<span>top</span>
</div>
<div id="bottom" class="box">
<span>bottom</span>
</div>

　　中间的元素整个被删除了，也就是说remove方法将目标元素整个的从DOM中移除

注：

$('#middle').html('<div class="child">html()'); .html方法和.append等方法中单引号和双引号要去别开不然会报错，同时要是含有特殊字符要用\进行转义

jq中 html append appendto相关推荐

Dynamics 365 讲清楚Security Role中的Append AppendTo
最近被问到这个问题,记忆有些模糊了,依稀记得我有写过博客分享过,但怎么搜都没搜到,无意间看了下草稿箱,发现已经在草稿箱里躺了两年多了.现在来完成这篇两年前就该完结的文章. Security Role中 ...
jq中的append方法
jq的append()就是在元素的最后面添加元素. 尤其注意的一点:如果是内部元素,第一个用append()方法添加的最后,那么第一个自动删除掉. 代码` <script type=" ...
比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
jQuery中的append()和appendTo()方法
jQuery中的append()和appendTo()方法的效果不是简单的"插入"元素到指定位置,实际上是"移动"元素到指定位置. 参考jQuery API中的 ...
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
无法解析 list 中的方法 iterator_Python-list中的append()和extend()方法区别
一.append()和extend()方法都是用来添加数据到list末尾的,两者的区别: append()添加的时候会把添加的数据当成一个整体进行添加,允许添加任意类型的数据 extend()添加的时 ...
Jquery真的不难~第五回 JQ中的遍历（遍历中的性能知识点）
回到目录上一回主要说的是JQ中的几个主要的事件,文章的最后还介绍了匿名函数的使用,恩,今天主要来看一下JQ中的遍历,就是在JQ中进行循环操作以及在遍历时要注意的地方. 前言要讲遍历就要说数组,你不 ...
JS模式：jq中简单的模式--》采摘自js设计（tomxu_version）
<!DOCTYPE html> <html> <head><title></title> </head> <body> ...
Python基础教程：list中的append()和extend()方法区别
一.append()和extend()方法都是用来添加数据到list末尾的,两者的区别: append()添加的时候会把添加的数据当成一个整体进行添加,允许添加任意类型的数据 extend()添加的时 ...

jq中 html append appendto

jq中 html append appendto相关推荐

最新文章

热门文章