JQuery简单学习(7)——jQuery HTML 操作

JavaCrazyer

浏览: 3012254 次
性别:
来自: 河南

最近访客更多访客>>

beifengbei08

mnisummer

kristy_yy

qijojo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端-JQuery专栏

jQuery HTML JavaScript

jQuery 包含很多供改变和操作 HTML 的强大函数。

————————————————————

改变 HTML 内容

语法

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("W3School");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

————————————————————

添加 HTML 内容

语法

$(selector).append(content)

append() 函数向所匹配的 HTML 元素内部追加内容。

语法

$(selector).prepend(content)

prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").append(" <b>W3School</b>.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

语法

$(selector).after(content)

after() 函数在所有匹配的元素之后插入 HTML 内容。

语法

$(selector).before(content)

before() 函数在所有匹配的元素之前插入 HTML 内容。

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").after(" W3School.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

————————————————————

jQuery HTML 操作 - 来自本页

函数描述 $(selector).html(content) 改变被选元素的（内部）HTML $(selector).append(content) 向被选元素的（内部）HTML 追加内容 $(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容 $(selector).after(content) 在被选元素之后添加 HTML $(selector).before(content) 在被选元素之前添加 HTML

分享到：

JQuery简单学习(8)——jQuery CSS 函数 | JQuery简单学习(6)——JQuery Callback 函 ...

2010-12-27 11:00
浏览 2606
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论