jQuery 包含很多供改變和操作 HTML 的強大函數(shù)。
————————————————————
- $(selector).html(content)
$(selector).html(content)
html() 函數(shù)改變所匹配的 HTML 元素的內(nèi)容（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><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> ————————————————————
- $(selector).append(content)
$(selector).append(content)
append() 函數(shù)向所匹配的 HTML 元素內(nèi)部追加內(nèi)容。
語法
- $(selector).prepend(content)
$(selector).prepend(content)
prepend() 函數(shù)向所匹配的 HTML 元素內(nèi)部預(yù)置（Prepend）內(nèi)容。
實例
- <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>
<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)
$(selector).after(content)
after() 函數(shù)在所有匹配的元素之后插入 HTML 內(nèi)容。
語法
- $(selector).before(content)
$(selector).before(content)
before() 函數(shù)在所有匹配的元素之前插入 HTML 內(nèi)容。
實例
- <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>
<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 操作 - 來自本頁
函數(shù)描述 $(selector).html(content) 改變被選元素的（內(nèi)部）HTML $(selector).append(content) 向被選元素的（內(nèi)部）HTML 追加內(nèi)容 $(selector).prepend(content) 向被選元素的（內(nèi)部）HTML “預(yù)置”（Prepend）內(nèi)容 $(selector).after(content) 在被選元素之后添加 HTML $(selector).before(content) 在被選元素之前添加 HTML
