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

本文实例讲述了jQuery中append()方法用法。分享给大家供大家参考。具体分析如下:

此方法可向所有匹配元素的内部的尾部追加HTML内容。

特别说明:

此方法是追加内容,并不会删除之前的内容。
html内容就是内容中可以包含html标签,并且能够被浏览器渲染。
文本内容是先将内容中的html预定义字符转换成html字符实体,这样html标签就不会被渲染。
语法结构:

复制代码 代码如下:

$(selector).append(content)

实例代码:
实例一:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div
{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").append("<b>好好学习</b>");
})
</script>
</head>
<body>
<div>原来内容</div>
</body>
</html>[/size]
[size=2]

在原来div内容的后面追加内容。
实例二:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div
{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $("button").click(function(){
    $(".html").append("<b>好好学习</b>");
    $(".text").text("<b>好好学习</b>");    
  })
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button>点击查看效果</button>
</body>
</html>

通过此实例大家可以观察一下HTML内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2016-12-25

jQuery中append()方法用法实例_jquery的相关文章

jQuery中trigger()方法用法实例_jquery

本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一:规定匹配元素被触发的事件类型. 复制代码 代码如下: $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件. param 可选.传递到事件处理程序的额外参数. 额外的参数对自定义事件特别有

jQuery中triggerHandler()方法用法实例_jquery

本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型.从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).tr

jQuery中appendTo()方法用法实例_jquery

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

jQuery中each()方法用法实例_jquery

本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

jQuery中index()方法用法实例_jquery

本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值. 索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 复制代码 代码如下: $(selector).index() 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo

jQuery中size()方法用法实例_jquery

本文实例讲述了jQuery中size()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回jQuery对象集合中元素的数目. size()方法的返回值与jQuery对象的length属性一致. 语法结构: 复制代码 代码如下: $(selector).size() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta na

jQuery中detach()方法用法实例_jquery

本文实例讲述了jQuery中detach()方法用法.分享给大家供大家参考.具体分析如下: 此方法从DOM中删除所有匹配的元素. 说明:detach()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,与remove()不同的是,所有绑定的事件.附加的数据等都会保留下来. 语法结构: 复制代码 代码如下: $(selector).detach(expr) 参数列表: 参数 描述 expr 可选.用于筛选被删除元素的jQuery表达式. 实例代码: 实例一: 复制代

jQuery中remove()方法用法实例_jquery

本文实例讲述了jQuery中remove()方法用法.分享给大家供大家参考.具体分析如下: 此方法将会从DOM中删除所有匹配的元素. 说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除. 语法结构: 复制代码 代码如下: $(selector).remove(expr) 参数列表: 参数 描述 expr 可选.用于筛选元素的jQuery表达式 实例代码: 实例一:

jQuery中replaceWith()方法用法实例_jquery

本文实例讲述了jQuery中replaceWith()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素替换成指定的HTML或DOM元素. 需要注意的是此方法是追加内容,也就是原来的内容还在. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).replaceWith(content) 参数列表: