Jquery基础:append、prepend、after、before、appendTo的区别

append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容。
after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容。
appendTo() 仍然是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容,只不过是jQuery函数的写法不太相同。
pretend()和before()的区别与append()和after()的区别是一样的,略。

分析用的源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function(){
            $("#button1").click(function(){
                $("span").append(‘<a href="#">append方法</a>‘);
            })
            $("#button2").click(function(){
                $("span").after(‘<a href="#">after方法</a>‘);
            })
            $("#button3").click(function(){;
                $(‘<a href="#">appendTo方法</a>‘).appendTo("span");
            })
        })
    </script>
</head>
<body>
        <span>JQuery的append、after、appendTo、pretend、before方法的区别</span>
        <button id="button1">append</button>
        <button id="button2">after</button>
        <button id="button3">appendTo</button>
        <p>要想看出区别,请F12看源码,右击不行</p>
</body>
</html>
时间: 2024-11-29 09:23:31

Jquery基础:append、prepend、after、before、appendTo的区别的相关文章

jQuery中append(),prepend()与after(),before()的区别

在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素的作用,容易混淆. 要想搞清楚他们之间的区别. 首先我们要明白这几个函数各自的作用. 一.append()和prepend()的作用 append()用于在被选元素的结尾插入元素. prepend()用于在被选元素的开头插入元素. 重点在于黑体字--被选元素的, 也就是说这两个函数的添加都是添加到元

jQuery基础(DOM篇,append(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

1.DOM创建节点及节点属性   创建流程比较简单,大体如下: - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法: - 创建元素:document.createElement - 设置属性:setAttribute - 添加文本:innerHTML - 加入文档:appendChild   2.jQuery节点创建与属性的处理 创建元素节点: 可以有几种方式,后面会慢慢接触.常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来

jquery中append、prepend, before和after方法的区别(一)

原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点). 1. append()和prepend() <div class='a'> <div class='b'>b</div> </div> 1 2

Jquery中的append()和prepend(),after()和before()的区别

Jquery中的append()和preappend(),after()和before()的区别 append()和prepend() 假设 <div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div> 使用 $('.a').append($('.c')); 则会这样: <div class='a'> //<---you wan

JQuery之append和appendTo的区别,还有js中的appendChild用法

JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>content</div>').appendTo($('#a')); 注意appendTo前面一定要是Jquery对象. appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点

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

首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").after("<a>aa</a>") 结果是<span></span><a>aa</a> 不是 <span><a>aa</a></span> 而如果用 append() $(&q

append和appendTo的区别以及appendChild用法 (一个是js中,另两个是jquery中)

append和appendTo的区别以及appendChild用法 作者: 字体:[增加 减小] 类型:转载 很多新手朋友们对append和appendTo的区别以及js中的appendChild用法有所模糊,下面就举例为大家详细介绍下,感兴趣的朋友不要错过 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>con

jquery中append跟prepend的用法

jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body").prepend('<form id="form01" name="user_name" action="login.php" method="post" $amp;>amp;$lt;/form$amp;>apos

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc