jquery使用append(content)方法注意事项分享

如以下示例：向所有段落中追加一些HTML标记。

HTML 代码:


代码如下:

<p>I would like to say: </p>

jQuery 代码:


代码如下:

$("p").append("<b>Hello</b>");

结果:

[ <p>I would like to say: <b>Hello</b></p> ]

这样看好像没什么，很正常，如果我们换个方式追加呢？

$("p").append("<b>");

$("p").append("Hello</b>");

结果：

[ <p>I would like to say: <b></b>Hello</p> ]

结果就成这样了，为什么会这样呢？

我想应该是在调用append()函数时，它会自动去检测你加进去的html内容是否符合标准，如果符合，正常加入，如果不符合，那么它就会自动生成符合它所谓的标准而进行显示。

赞 (0)

相关推荐

  • jQuery使用append在html元素后同时添加多项内容的方法

    本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g

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

    还是先来看一下现象: 复制代码 代码如下: $(".main").append("haha"); $(".main").append("xixi"); alert($(".main").html()); 结果:hahaxixi 一切正常 改一下 复制代码 代码如下: $(".main").append("<div style=\"width:300px;heig

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

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • 解决Jquery向页面append新元素之后事件的绑定问题

    解决Jquery向页面append新元素之后事件的绑定问题

    我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法. 其实很简单: 1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下 复制代码 代码如下: /*经过用户技能标签增加样式*/ $(function(){ $(".s-edited").hover(function(){    $(this).toggleClass("borderd"); }) })

  • jQuery中append()方法用法实例

    本文实例讲述了jQuery中append()方法用法.分享给大家供大家参考.具体分析如下: 此方法在匹配元素的结尾插入指定内容. 元素被插入的位置是匹配元素的内部,而after()方法元素被插入的位置是匹配元素的外部. append()方法的作用和appendTo()方法是相同的,但是语法是不同的,尽管语法形式一样. 语法结构: 复制代码 代码如下: $(selector).append(content) 参数列表: 参数 描述 content 指定被插入的内容,content的可能的值: 1.

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

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别. 1.append()方法:在被选元素的结尾(但仍在元素内部)插入指定的内容. a.语法: 复制代码 代码如下: $(selector).append(content); 其中,参数content是必需的,指定要附加的内容. b.append能够使用函数给被选元素附加内容,语法为

  • jquery使用append(content)方法注意事项分享

    如以下示例:向所有段落中追加一些HTML标记. HTML 代码: 复制代码 代码如下: <p>I would like to say: </p> jQuery 代码: 复制代码 代码如下: $("p").append("<b>Hello</b>"); 结果: [ <p>I would like to say: <b>Hello</b></p> ] 这样看好像没什么,很正常

  • jQuery中inArray方法注意事项分析

    本文分析讲述了jQuery中inArray方法注意事项.分享给大家供大家参考,具体如下: jquery为web开发者提供了很大的便捷,本文写作的目地是提醒大家慎重jquery中的inArray方法. 大家都知道javascript是一种弱类型语言,对于数字类型和字符类型,可以随意切换(例如:1+""="1"),下面开始说主题: jquery的一个方法inArray(ele, array)是判断ele是否在array中存在,返回值是该元素第一次出现在数组array中的

  • jquery数组封装使用方法分享(jquery数组遍历)

    $.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 使用方法如下: 复制代码 代码如

  • jquery的each方法使用示例分享

    对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. 复制代码 代码如下: jQuery.prototype.each=function( fn, args ) {  return jQuery.each( this, fn, args ); } 让我们

  • jQuery打字效果实现方法(附demo源码下载)

    jQuery打字效果实现方法(附demo源码下载)

    本文实例讲述了jQuery打字效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 1.前台页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • jQuery简易时光轴实现方法示例

    本文实例讲述了jQuery简易时光轴实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>timeLine</title> <style> body{ margin: 0; padding: 0; background: #e8ffe8; } #head, #content, #footer{ width: 100

  • Jquery注册事件实现方法

    本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

随机推荐