`

jquery after append appendTo的区别 (面试会问到,容易混淆)

阅读更多

jq文档的说明是

1、after函数

定义和用法:

after() 方法在被选元素后插入指定的内容。

语法:

$(selector).after(content)

实例:

<html>
<head>
<script type="text/JavaScript" src="/jQuery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").after("<a href="#">ddddd</a>")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

结果如下:

<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>

span标签后面多了一个a标签

 

2、append函数

定义和用法:

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(selector).append(content)

实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").append("<a href="#">ddddd</a>")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>


 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签

 

 

3、appendTo函数

定义和用法:

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(content).appendTo(selector)实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
   // $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的

$("<a href="#">ddddd</a>").appendTo("span")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>


 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签

效果和append函数是一样,只不过它们的写法是反着来写的而已

 

 

备注:before函数与after函数相反,表示是元素的前面加入指定元素

0
4
分享到:
评论

相关推荐

    jquery append与appendTo方法比较

    jquery中append与appendTo方法区别 1. append(content)方法 方法作用:向每个匹配的元素内部追加内容。 参数介绍:content (): 要追加到目标中的内容。 用法示例: HTML代码为&lt;p&gt;I come from &lt;/p&gt;&lt;p&gt;I love  向...

    jquery中append()与appendto()用法分析

    `append()`和`appendTo()`的主要区别在于它们处理内容的方式:`append()`在目标元素内部添加内容,而`appendTo()`则将内容移动到目标元素内部。理解这两个方法的差异有助于优化你的代码结构,特别是在处理大量DOM...

    关于jquery append() html时的小问题的解决方法

    这就意味着,如果字符串没有正确地闭合标签,那么就会发生嵌套错误,这在多处使用append()进行内容追加时尤其容易发生。 针对这个问题,更稳妥的方法可能是构造一个完整的jQuery对象,然后再使用append()函数进行...

    jQuery中append、insertBefore、after与insertAfter方法注意事项

    在使用jQuery进行DOM操作时,append、prepend、before和after方法是经常使用的,它们可以帮助开发者以不同的方式动态地修改页面内容。同时,appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...

    解决jQuery使用append添加的元素事件无效的问题

    在jQuery中,`append`方法是用来向DOM树中动态添加元素的,这在构建动态页面时非常常见。然而,一个常见的问题是在使用`append`添加的元素上绑定的事件经常无法正常工作,即所谓的“事件无效”。这是因为这些新添加...

    append和appendTo的区别以及appendChild用法

    append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $(‘#a’).append(‘content’); $(‘&lt;div&gt;content’).appendTo($(‘#...

    jQuery中append()方法用法实例

    jQuery中的append()方法是用于在jQuery对象所匹配到的每一个元素内部的末尾添加内容。这个方法并不会移除任何已存在的内容,而是将新的内容追加到选定元素的内容末尾。这一点是非常重要的,尤其是在动态添加内容到...

    整合了网上大多数jQuery面试题及答案,最全面超完整jQuery面试题及答案

    jQuery面试题库 以下是根据给定文件信息生成的相关知识点: jQuery 选择器 * jQuery 中的选择器有基本选择器、后代选择器、类选择器等。 * 不同的选择器可以在不同的场景下使用,例如基本选择器用于选择某个标签...

    jquery append

    这里面主要是讲关于jquery append 函数的使用,方便用户使用函数

    jQuery中appendTo()方法用法实例

    本文实例讲述了jQuery中appendTo()方法用法。分享给大家供大家参考。具体分析如下: 此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部。 appendTo()方法的作用和append()方法是相同的,但是语法是不同的,...

    jquery 追加元素append、prepend、before、after用法与区别分析

    区别在于append会将内容添加到子元素的末尾,而prepend则会将内容添加到子元素的开头。例如: ```javascript $("#content").append("新的段落&lt;/p&gt;"); // 在content元素的子元素末尾追加段落 $("#content").prepend(...

    jquery append()方法与html()方法的区别及使用介绍

    jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过简化 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作,使得 Web 开发变得更加容易。在 jQuery 中,append() 方法和 html() 方法都是经常被使用到的,...

    整合了网上大多数jQuery面试题及答案

    这些只是jQuery面试中可能会涉及的一部分核心概念。熟练掌握这些知识点,并结合实际项目经验,将有助于在面试中表现出色。通过这个整合的面试题集,开发者不仅可以复习巩固jQuery知识,还能发现自己的盲点,从而更好...

    jQuery动态改变列宽

    jQuery动态改变列宽,可以实现拖动jQuery动态改变列宽,可以实现拖动

Global site tag (gtag.js) - Google Analytics