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

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