append和appendTo的区别!

  今天在写dome的时候,碰到了一小点问题,就是我们想把一个小效果用jquery的办法添加到HTML页面中。我用的办法就是先在HTML中把代码写完,js和css同样写好并调试完成后。然后只保存外面最大的盒子,保证jq能找到代码的插入位置。然后把代码复制到js文件中,采用字符串拼接的方式,请看下面的代码:

1 var str=‘<div class="cen1">1</div>‘+
2         ‘<div class="cen2">2</div>‘+
3         ‘<div class="cen3">3</div>‘+
4         ‘<div class="cen4">4</div>‘+
5         ‘<div class="cen5">5</div>‘;

这里就拼接好了一个str。然后我就把str插入到了HTMl中,用的是这条语句:

1 $(‘#box‘).append(str);//ID名为box的是个大盒子

这样就完成了。但是写完后突然想到了append的兄弟,appendTo。我就手贱的写成了这样:

1 str.appendTo($(‘#box‘));

结果浏览器就开始报错了:

Uncaught TypeError: str.appendTo is not a function
at 2.html:34

怎么报错了呢,在我的印象中appenTo和append不就是位置不同吗,没什么区别啊。但是仔细的看了一下报错,突然明白了。str只是个字符串变量,一个普通的变量怎么能用“.”方法呢,这肯定是不对的。所以这里也就只能用append了。所以在这里给自己提个醒,也请大家注意!

时间: 2024-10-20 12:41:46

append和appendTo的区别!的相关文章

转:jQ函数after、append、appendTo的区别

1.after函数定义和用法:after() 方法在被选元素后插入指定的内容.参考:http://keleyi.com/a/bjac/cfyxd60g.htm语法:$(selector).after(content)实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13.htm实例代码: <html> <head> <title>jquery的after函数实例-柯乐义</title><base target=&

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

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

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

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

jQ函数after、append、appendTo的区别

1.after函数定义和用法:after() 方法在被选元素后插入指定的内容.语法:$(selector).after(content) 实例代码: <html><head><title>jquery的after函数实例-柯乐义</title><base target="_blank" /><script type="text/javascript" src="http://keleyi.c

jquery中append与appendTo方法区别

1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为<p>I come from </p><p>I love  </p> 向所有p标签中追加一个单词china,则写法为 $("p").append("china"); 结果为:<p>I come from chin

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 appendChild appendTo区别

1.append和appendChild的区别 append是jquery文档操作用法 ① append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 1 $("button").click(function(){ 2 $("p").append(" <b>Hello world!</b>"); 3 }); ②使用函数在指定元素的结尾插入内容. $(selec

jquery append,appendTo,prepend,prependTo 介绍

在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容: 首先是append(content)这个函数: 意思是将内容content加入到所选择的对象内容的后面 例如:$("div").append("<p>" +  hello + "</p>"); 意为在所有div元素里面添加一个p标签,标签内容为hello,如果div元素里面有其他的内容则在原来的内容后面添加新的内容 然后是appendTo(content

JQuery中html、append、appendTo、after、insertAfter系列方法

html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样: after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入: before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入: insertAfter将JQuery封装好的元素插入到指定元素的后