work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery HTML 操作 改变/添加文本值

Posted on 2012-01-01 22:32  work hard work smart  阅读(18868)  评论(0)  编辑  收藏  举报

1、JQuery 改变p中的文本值

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("Update text");
  });
});
</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 here</button>
</body>

</html>

 2、JQuery 添加p中的文本值

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

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>

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

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").after(" Add  content.");
  });
});
</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 here</button>
</body>

</html>

 4、jQuery HTML 操作

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