jQuery 建立和插入元素
一、使用jQuery建立元素
1、建立元素
[javascript] view plain copy
- $(function(){
- var $h1=$(“<h1></h1>”);
- $(“body”).append($h1);
- })
2、建立文字
[javascript] view plain copy
- $(
- var $h1=$(“<h1>DOM文件物件模型</h1>”);
- $(“body”).append($h1);
- })
3、建立屬性
[javascript] view plain copy
- $(function(){
- var $h1=$(“<h1 title=“一級標題” class=“red”>DOM文件物件模型</h1>”);
- $(“body”).append($h1);
- })
二、使用jQuery插入元素
1、在節點內部插入內容
(1)、append()方法在被選元素的結尾(仍然在內部)插入指定內容
提示:append() 和 appendTo() 方法執行的任務相同。不同之處在於:內容的位置和選擇器。
語法:$(selector).append(content)
content必需。規定要插入的內容(可包含 HTML 標籤)。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").append(" <b>Hello world!</b>");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每個 p 元素的結尾新增內容</button>
- </body>
- </html>
使用函式來附加內容,使用函式在指定元素的結尾插入內容。
語法:$(selector).append(function(index,html))
function(index,html) 必需。規定返回待插入內容的函式。
index - 可選。接收選擇器的 index 位置。
html - 可選。接收選擇器的當前 HTML。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").append(function(n){
- return "<b>This p element has index " + n + "</b>";
- });
- });
- });
- </script>
- </head>
- <body>
- <h1>This is a heading</h1>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每個 p 元素的結尾新增內容</button>
- </body>
- </html>
(2)、appendTo()方法在被選元素的結尾(仍然在內部)插入指定內容
提示:append() 和 appendTo() 方法執行的任務相同。不同之處在於:內容和選擇器的位置,以及 append() 能夠使用函式來附加內容。
語法:$(content).appendTo(selector)
content必需。規定要插入的內容(可包含 HTML 標籤)。
selector必需。規定把內容追加到哪個元素上。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("<b> Hello World!</b>").appendTo("p");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每個 p 元素的結尾新增內容</button>
- </body>
- </html>
(3)、prepend() 方法在被選元素的開頭(仍位於內部)插入指定內容
提示:prepend() 和 prependTo() 方法作用相同。差異在於語法:內容和選擇器的位置,以及 prependTo() 無法使用函式來插入內容。
語法:$(selector).prepend(content)
content必需。規定要插入的內容(可包含 HTML 標籤)。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").prepend("<b>Hello world!</b> ");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每個 p 元素的開頭插入內容</button>
- </body>
- </html>
使用函式來附加內容,使用函式在被選元素的開頭插入指定的內容。
語法:$(selector).prepend(function(index,html))
function(index,html) 必需。規定返回待插入內容的函式。
index - 可選。接受選擇器的 index 位置。
html - 可選。接受選擇器的當前 HTML。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").prepend(function(n){
- return "<b>這個 p 元素的 index 是:" + n + "</b> ";
- });
- });
- });
- </script>
- </head>
- <body>
- <h1>這是一個標題</h1>
- <p>這是一個段落。</p>
- <p>這是另一個段落。</p>
- <button>在每個 p 元素的開頭插入內容</button>
- </body>
- </html>
(4)、prependTo() 方法在被選元素的開頭(仍位於內部)插入指定內容
提示:prepend() 和 prependTo() 方法作用相同。差異在於語法:內容和選擇器的位置,以及 prepend() 能夠使用函式來插入內容。
語法:$(content).prependTo(selector)
content 必需。規定要插入的內容(可包含 HTML 標籤)。
selector 必需。規定在何處插入內容。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".btn1").click(function(){
- $("<b>Hello World!</b>").prependTo("p");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button class="btn1">在每個 p 元素的開頭插入文字</button>
- </body>
- </html>
2、在節點外部插入內容
(1)、after() 方法在被選元素後插入指定的內容
語法:$(selector).after(content)
content必需。規定要插入的內容(可包含 HTML 標籤)。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").after("<p>Hello world!</p>");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <button>在每個 p 元素後插入內容</button>
- </body>
- </html>
使用函式來插入內容,使用函式在被選元素之後插入指定的內容。
語法:$(selector).after(function(index))
function(index) 必需。規定返回待插入內容的函式。
index - 可選。接收選擇器的 index 位置。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").after(function(n){
- return "<p>The p element above has index " + n + "</p>";
- });
- });
- });
- </script>
- </head>
- <body>
- <h1>This is a heading</h1>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每個 p 元素後插入內容</button>
- </body>
- </html>
(2)、before() 方法在被選元素前插入指定的內容
語法:$(selector).before(content)
content 必需。規定要插入的內容(可包含 HTML 標籤)。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".btn1").click(function(){
- $("p").before("<p>Hello world!</p>");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <button class="btn1">在每個段落前面插入新的段落</button>
- </body>
- </html>
使用函式來插入內容,使用函式在指定的元素前面插入內容。
語法:$(selector).before(function(index))
function(index)必需。規定返回待插入內容的函式。
index - 可選。接收選擇器的 index 位置。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").before(function(n){
- return "<p>The p element below has index " + n + "</p>";
- });
- });
- });
- </script>
- </head>
- <body>
- <h1>This is a heading</h1>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button class="btn1">在每個段落前面插入新的段落</button>
- </body>
- </html>
(3)、insertAfter()把匹配的元素插入到另一個指定的元素集合的後面
註釋:如果該方法用於已有元素,這些元素會被從當前位置移走,然後被新增到被選元素之後。
語法:$(content).insertAfter(selector)
content必需。規定要插入的內容。可能的值:選擇器表示式、HTML 標記
selector必需。規定在何處插入被選元素。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("<span>你好!</span>").insertAfter("p");
- });
- });
- </script>
- </head>
- <body>
- <p>這是一個段落。</p>
- <p>這是另一個段落。</p>
- <button>在每個 p 元素之後插入 span 元素</button>
- </body>
- </html>
插入已有的元素
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("h1").insertAfter("p");
- });
- });
- </script>
- </head>
- <body>
- <h1>這是一個標題</h1>
- <p>這是一個段落。</p>
- <p>這是另一個段落。</p>
- <button>在每個 p 元素之後插入 h1 元素</button>
- </body>
- </html>
(4)、insertBefore()把匹配的元素插入到另一個指定的元素集合的前面
註釋:如果該方法用於已有元素,這些元素會被從當前位置移走,然後被新增到被選元素之前。
語法:$(content).insertBefore(selector)
content 必需。規定要插入的內容。可能的值:選擇器表示式、HTML 標記
selector 必需。規定在何處插入被選元素。
[html] view plain copy
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("<span>你好!</span>").insertBefore("p");
- });
- });
- </script>
- </head>
- <body>
- <p>這是一個段落。</p>
- <p>這是另一個段落。</p>
- <button>在每個 p 元素之前插入 span 元素</button>
- </body>
- </html>