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

下面进行简单的测试和验证,首先是页面结构:

对应的效果如下:

一、html()方法      $(selector).html(content);

注意,这里所填写的html()方法中的代码是不完整的。

查看结果:

查看对应的最终代码:

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

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

二、append()方法   $(selector).append(content);

查看结果:

查看对应的最终代码:

由此可见,append的内容添加到了选中内容的内部,并且对其原有的内容不影响。

三、appendTo()方法     $(content).appendTo(selector);

查看结果:

查看对应的最终代码:

appendTo()和append效果相同,只是写法不同。

四、after()方法      $(selector).after(content);

查看结果:

查看对应的最终代码:

after()方法将html代码插入到指定元素的后面,如果后面有元素,则将元素后移,再插入html代码。

*insertAfter()和after()使用的方法和效果相同,只是写法不同:

同理,before()方法将html代码插入到指定元素前面,如果前面有元素,则将元素前移,再插入html代码。

insertBefore()和before()使用的方法和效果也相同。如下:

五、empty()方法      $(selector).empty();

查看结果:

查看对应代码:

可以看出,使用empty()方法,被选中的元素中的html内容都被清除了,但元素本身还存在。

六、remove()方法   $(selector).remove;

查看结果:

查看对应的最终代码:

可以发现,使用remove()方法,被选中的整个元素包括其内部的子元素都被移除了(remove方法将目标元素整个的从DOM中移除)。

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用的更多相关文章

  1. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  2. jquery中 after append appendTo 的区别

    after:在选择的元素后面添加内容,不在选择的元素内 append:在选择的元素后面的里面添加内容 appendTo:将元素添加到选择的元素里面,而且添加的元素必须是jQuery对象

  3. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

  4. jquery中的append功能相当于剪切的作用 将原来的元素剪切走

    jquery中的append功能相当于剪切的作用 将原来的元素剪切走

  5. jQuery中的append()和prepend(),after()和before()的差别

    jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<- ...

  6. jquery:after append appendTo三个函数的区别

    1.查找元素节点      var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);    2.查找元素属性 利用jq ...

  7. jQuery中的append中含有onClick的问题

    在jQuery中,当append中含有onClick时,点击事件无效果.需要在append完之后再额外绑定点击事件.

  8. jquery中的append和appendTo用法

    append(content):向每个匹配的元素内部追加内容.这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似. JavaScript代码 <script ty ...

  9. jquery中的 append , after , prepend , before 区别

    jQuery append() 方法在被选元素的结尾插入内容. jQuery prepend() 方法在被选元素的开头插入内容. jQuery after() 方法在被选元素之后插入内容. jQuer ...

  10. jquery中添加元素append,prepend,before和after方法的区别

    append:在元素内部的最后面添加元素,作为子元素. prepend:在元素内部的最前面添加元素,作为子元素. before:在元素的前边,作为兄弟元素添加. after:在元素的后边,作为兄弟元素 ...

随机推荐

  1. FZU2218 Simple String Problem(状压DP)

    首先,定义S,表示前k个字符出现的集合,用二进制来压缩. 接下来,推出dp1[S],表示集合为S的子串的最长长度. 然后根据dp1[S]再推出dp2[S],表示集合为S或S的子集的子串的最长长度. 最 ...

  2. BZOJ 1067 & Interval_Tree

    1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 3099 Solved: 800 Description 我们常常 ...

  3. UOJ#61. 【UR #5】怎样更有力气

    大力水手问禅师:“大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点菠菜甚至不吃菠菜却仍很有力气?” 禅师浅笑,答:“ ...

  4. java中的sleep()和wait()的区别

    对于sleep()方法,我们首先要知道该方法是属于Thread类中的.而wait()方法,则是属于Object类中的. sleep()方法导致了程序暂停执行指定的时间,让出cpu该其他线程,但是他的监 ...

  5. JS来操作hover

    hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <s ...

  6. PHPUnit在Windows下的配置及使用

    由于我们项目涉及到php,因此需要对php代码进行单元测试.经过一番了解,决定用PHPUnit来测试php.PHPUnit花了不少时间摸索如何配置PHPUnit,看官网的文档也是一把泪.但知道怎么配置 ...

  7. 发现未知字段 state ,过滤条件 [["state","not in",["draft"]]] 有误 的处理

    通常该问题出现的原因在于对象定义的state字段在view中并没有出现,解决方案就是在view中添加该字段即可.

  8. Struts2 实战(一)

    环境: Ubuntu 14.04 LTS 64位 开发工具的准备 我选择 Eclipse, 而没有选择MyEclipse, 一是因为免费,不想去弄破解,二是不想太傻瓜化的东西(注:本人并没有用过MyE ...

  9. Description of security events in Windows 2003/7/2008

    https://technet.microsoft.com/library/cc163121.aspx#EKH https://support.microsoft.com/en-us/kb/97751 ...

  10. 按月将Windows日志导出至CSV文件

    # 这个月的第一天 #..........................................到这里之前是取当年第一天 #(Get-Date 0).AddYears((Get-Date). ...