手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery中append()方法用法实例
jQuery中append()方法用法实例
摘要:本文实例讲述了jQuery中append()方法用法。分享给大家供大家参考。具体分析如下:此方法可向所有匹配元素的内部的尾部追加HTML内容...

本文实例讲述了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></div>

<div></div>

<button>点击查看效果</button>

</body>

</html>

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

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

【jQuery中append()方法用法实例】相关文章:

JavaScript中setMonth()方法的使用详解

JQuery控制Radio选中方法分析

JavaScript中toString()方法的使用详解

简介JavaScript中toTimeString()方法的使用

JavaScript中的italics()方法的使用介绍

JavaScript中fixed()方法的使用简介

JavaScript中getUTCMinutes()方法的使用详解

JQuery中clone方法复制节点

JQuery中Text方法用法实例分析

JavaSacript中charCodeAt()方法的使用详解

精品推荐
分类导航