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

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

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

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

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

str.appendTo($('#box'));

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

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

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

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

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

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  2. jQ函数after、append、appendTo的区别

    1.after函数定义和用法:after() 方法在被选元素后插入指定的内容.参考:http://keleyi.com/a/bjac/cfyxd60g.htm 语法:$(selector).after ...

  3. jQuery中append()与appendTo()方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  4. jquery中 append 和appendto的区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  5. jquery中append与appendTo方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  6. append appendChild appendTo区别

    1.append和appendChild的区别 append是jquery文档操作用法 ① append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(c ...

  7. 【笔记】jquery append,appendTo,prepend,prependTo 介绍

    在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容: 首先是append(content)这个函数: 意思是将内容content加入到所选择的对象内容的后面 例如:$("di ...

  8. jQuery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...

  9. jquery append 和appendTo

    原文: https://www.cnblogs.com/stitchgogo/p/5721551.html ---------------------------------------------- ...

随机推荐

  1. request.getRequestDispatcher跳转jsp页面失败

    我在JS里面写了个Ajax,传值给控制器,然后利用request.getRequestDispatcher(),打算跳转至另外一个页面.但是没有跳转成功,运行之后没反应. 在网上搜了资料发现,利用aj ...

  2. [Swift]LeetCode93. 复原IP地址 | Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  3. [Swift]LeetCode454. 四数相加 II | 4Sum II

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l)there are such th ...

  4. [Swift]LeetCode483. 最小好进制 | Smallest Good Base

    For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...

  5. [Swift]LeetCode857. 雇佣 K 名工人的最低成本 | Minimum Cost to Hire K Workers

    There are N workers.  The i-th worker has a quality[i] and a minimum wage expectation wage[i]. Now w ...

  6. [Swift]LeetCode938. 二叉搜索树的范围和 | Range Sum of BST

    Given the root node of a binary search tree, return the sum of values of all nodes with value betwee ...

  7. 白话说java gc垃圾回收

    gc是java区别于其他好几门语言(c/c++)的一个代表功能(当然也有很多可以自动管理内存的语言,如所有的脚本语言,你根本不知道内存管理这回事)! 当然,之所以要把c/c++和java相比,是因为j ...

  8. 【TOGAF】总体认知

    TOGAF是什么 TOGAF(The Open Group Architecture Framework)是当前最为流行的企业架构框架理论之一,它为一个企业或组织对于企业架构的接受.创建.使用和维护提 ...

  9. java代码之美(8)---guava字符串工具

    guava字符串工具 在java开发过程中对字符串的处理是非常频繁的,google的guava工具对字符串的一些处理进行优化,使我们开发过程中让自己的代码看去更加美观,清爽. 一.Joiner 根据给 ...

  10. linux安装RabbitMQ

    一.RabbitMQ概念RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.R ...