jQuery DOM操作之插入節點
插入節點
將新建立的節點插入到某個文件的方法並非只有常見的append()，
在jQuery中還提供了其他幾種插入節點的方法，
如表
一、append( ) 、appendTo( ) -- 在元素內部的後面追加
| append() | 向匹配的元素內部的後面追加內容 | $(A).append(B) 將B追加到匹配的A中 |
| appendTo() | 將元素追加到指定的元素中的後面 與append()正好顛倒 即不是將B追加到A中 而是將A追加到B中 |
$(A).appendTo(B) 將A追加到B中 |
假設<body>標籤中有如下程式碼：
<p>我想說：<i>Hello...</i></p>
如果希望在<p>標籤內的文字變成 “我想說：Hello...Hi!”。並且 “Hi!” 兩個字母加粗。
則程式碼應該寫成
<p>我想說：<i>Hello...</i><b>Hi!</b></p>如果用 append() 和 appenTo() 實現
1. append()方法：
<!doctype html> <html> <script src="jquery.js"></script> <head> <meta charset="utf-8"> <title>無標題文件</title> <script src="jquery.js" type="text/javascript"></script> </head> <body> <p>我想說：<i>Hello...</i></p> <script> $("p").append("<b>Hi!</b>"); </script> </body> </html>
注意此例子中<script></script>標籤應該寫在 <body>中要操作的標籤的下面。
最好直接寫在 <body></body>內部的最下面。
因為該js程式碼實現的前提是需要在標籤載入完畢的時候。
如果寫在<head>標籤內。頁面執行時還沒有加載出<body>中的<p>標籤。所以js程式碼塊不起作用。
此時就等於了
<p>我想說：<i>Hello...</i><b>Hi!</b></p>
2. appendTo()方法：
如果直接將上邊 <script></script>程式碼內的
“ $("p").append("<b>Hi!</b>"); ” 改成 “ $("p").appendTo("<b>Hi!</b>"); ”
則執行頁面時發現頁面空白。因為 appendTo()方法是將前邊的內容追加到後面的內容中。
而HTML文件中並沒有"<b>Hi!</b>"這行內容。所以無從追加。
如果將“ $("p").appendTo("<b>Hi!</b>"); ”中 appendTo 前後括號調換位置。再執行頁面，執行結果同上。
也就是說 如果希望 頁面<body>中HTML結構由
<p>我想說：<i>Hello...</i></p>
變為
<p>我想說：<i>Hello...</i><b>Hi!</b></p>
那麼以下兩種方式都是正確的，但區別是前後內容括號顛倒位置
$("p").appendTo("<b>Hi!</b>"); //1.在<p>標籤裡追加"<b>Hi!</b>"
$("<b>Hi!</b>").appendTo("p"); //2.將"<b>Hi!</b>"追加到<p>標籤二、prepend( ) 、 prependTo( )--在元素內部的前面追加
| prepend() | 向匹配的元素內部前置內容 | $(A).prepend(B) 將B前置到匹配的A中 |
| prependTo() | 將元素前置到指定的元素中 與prepend()正好顛倒 即不是將B前置到A中 而是將A前置到B中 |
$(A).prependTo(B) 將A前置到B中 |
若在<script></script>程式碼塊中用 prepend()
$("p").prepend("<b>Hi!</b>");執行後：
可以看出prepend()方法將 "<b>Hello</b>" 追加到<p>標籤內部的前邊。也就是說位於<p></p>標籤內部的最前方
因此pretend()方法和attend()方法雖然都是在元素內部追加指定內容，但是前者在內部的前面追加。後者在內部的後面追加。
若上述在<script></script>程式碼塊中用 prependTo(),同上面appendTo一樣。頁面空白。
而調換前後括號換位置時候運行同上。
也就是說 如果希望 頁面<body>中HTML結構由，
<p>我想說：<i>Hello...</i></p> 變為 <b>Hi!</b>我想說：<i>Hello...</i></p>
那麼以下兩種方式都是正確的，但區別是前後內容括號顛倒位置
$("p").prepend("<b>Hi!</b>");//1.在<p>標籤內部的前邊追加"<b>Hello</b>"
$("<b>Hi!</b>").prependTo("p");//2.將"<b>Hello</b>"追加到<p>標籤內部的前邊三、before( ) 、insertBefore( ) --在元素外部之前加入內容
| before() | 在匹配的元素之前插入內容 | $(A).before(B) 將B插入到匹配的A前面 |
| insertBefore() | 將元素插入到指定的元素的前面 與before()正好顛倒 即不是將B插入到A前面 而是將A插入到B前面 |
$(A).insertBefore(B) 將A插入到B前面 |
同樣假設<body>標籤內部有 “ <p>我想說：<i>Hello...</i></p> ”程式碼行
js中寫入以下程式碼：
$("p").before("<b>Hi!</b>");執行結果：
或者說換成insertBefore()方法執行以下程式碼：
$("<b>Hi!</b>").insertBefore("p");<p>我想說：<i>Hello...</i></p> 變為 <b>Hi!</b><p>我想說：<i>Hello...</i></p>
四、after( ) 、insertAfter( ) --在元素外部之後加入內容
| after() | 向匹配的元素之後插入內容 | $(A).append(B) 將B插入到匹配的A後面 |
| insertAfter() | 將元素插入到指定的元素後面 與after()正好顛倒 即不是將B插入到A後面 而是將A插入到B後面 |
$(A).appendTo(B) 將A插入到B後面 |
同樣假設<body>標籤內部有“ <p>我想說：<i>Hello...</i></p> ”程式碼行
js中寫入以下程式碼：
$("p").after("<b>Hi!</b>");
同樣換成insertAfter()方法執行以下程式碼：
$("<b>Hi!</b>").insertAfter("p");總結的說，如果希望實現將HTML結構由
<p>我想說：<i>Hello...</i></p> 變成<p>我想說：<i>Hello...</i></p><b>Hi!</b>
after()和insertAfter()兩種方法都可以。但是要注意前後括號的位置關係。
所以before() 和insertBefore()、after和insertAfter()方法是往指定元素的外部插入新的節點。
不同的是 before()和insertBefore()是在元素之前新增新內容。即元素的外部的前邊。
而after和insertAfter()方法是在元素之後新增新內容。即元素的外部的後邊。
attend() 和attendTo()、prepend和prependTo()方法是往指定元素的內部插入新的節點。
不同的是prepend和prependTo()方法是在元素中的前邊新增新內容。即元素的內部的前邊。
而attend() 和attendTo()是在元素中的後邊新增新內容。即元素的內部的後邊。
相關推薦
jQuery DOM操作之插入節點
插入節點 將新建立的節點插入到某個文件的方法並非只有常見的append()， 在jQuery中還提供了其他幾種插入節點的方法， 如表 一、append( ) 、appendTo( ) -- 在元素內部
jQuery-DOM操作之復制、替換、包裹節點
code 操作 所有 喜歡 傳遞 pen 傳遞參數 含義 新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().
jQuery的DOM操作之設置和獲取HTML、文本和值 html（）text（）val（）
java fontsize doc .text cti checkbox .net mar jsb 1. html()方法: 此方法類似於JavaScript中的innerHTML屬性，可以用來讀取或者設置某個元素中的html內容。 <html> <h
jQuery文檔操作之插入操作
query () string inner str create 示例 ebe addclass append() 語法 父元素.append(子元素) 解釋：追加某元素，在父元素中添加新的子元素。子元素可以為：string/element(js對象)/jQuery元素
jQuery DOM 操作（基本操作、內部插入、外部插入、包裹操作）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content=
js之DOM操作（刪除節點removeChild()）
刪除節點removeChild() removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。 語法: nodeObject.rem
DOM操作之CSS操作
規則 相關 dom操作 get ron insert selector lin 對象 操作行內樣式 寫法：元素節點.style 得到該元素節點的CSS樣式聲明對象;CSSStyleDeclaration 元素節點.style.樣式名
mybatis動態SQL操作之插入學習筆記
動態SQL操作之插入學習筆記1 import java.util.ArrayList; import java.util.List; import org.apache.ibatis.session.SqlSession; import cn.itcast.javaee.mybatis.util.Myb
20 Jquery DOM操作
image 操作 logs 分享 jquery http query current style 20 Jquery DOM操作
jquery（三）jQuery DOM 操作 取值 賦值
獲得內容 - text()、html() 以及 val() text() - 設定或返回所選元素的文字內容 html() - 設定或返回所選元素的內容（包括 HTML 標記） val() - 設定或返回表單欄位的值 $("#btn1").click(function()
Python學習 Day 049 - jQUery -DOM操作
主要內容: 1.jQuery的文件操作 2. 1.jQuery的文件操作 1.1插入操作 //語法: 父元素.append(子元素) //解釋:追加某元素,在父元素中新增的子元素.子元素可以為: stirng | element（js物件） | jquery元素 程式碼示例
jQuery屬性操作之.attr()
目錄 .attr() 呼叫形式:$("xxx").attr(name) 呼叫形式:$("xxx").attr(name,value); 呼叫形式:$("xxx").attr(attrObject); 呼叫形式:$("xxx").attr(name,attrFn);
jQuery屬性操作之.val()函式
目錄 .val()例項方法的三種用法 .val()函式原始碼 呼叫形式:$('xxx').val(); 呼叫形式:$('xxx').val(value); 呼叫形式:$('xxx').val(function(index,value){}); @ .val()例項方法的三種用法
jquery DOM操作
一、jq操作 DOM 元素獲得與失去焦點事件： onfocus/onblur 表單提交事件：onsubmit 二、DOM分類 DOM操作分為三類： 三、jq六大DOM操作 四、操作DOM之樣式
js表格中的DOM操作之隔行變色，滑鼠進入當前行高亮
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><
jquery DOM 建立、插入、刪除 、複製、替換、包裹
1.建立元素節點： $(" ") 2.建立文字節點，與建立元素節點類似，可以直接把文字內容一併描述 $(“ 我是文字節點 ”) 3.建立屬性節點：與建立元素節點同樣的方式 $(“ 我是文字節點 ”) $(“ 動態建立DIV
【JQuery】JQuery學習筆記：JQuery操作HTML，即JQuery DOM操作
1，jQuery DOM操作，設定或獲得內容： 設定，在（）內填入內容即可，有回撥函式； text() - 設定或返回所選元素的文字內容 html() - 設定或返回所選元素的內容（包括 HTML 標記） val() - 設定或返回表單欄位的值 2，jQuery D
jQuery——入門（三）JQuery DOM操作（屬性操作/樣式操作/文件過濾）
jQuery——入門（三）JQuery DOM操作（屬性操作/樣式操作/文件過濾） 一、DOM屬性操作 1、屬性 (1)、attr() 方法 語法：$(selector).attr(name|property|key, value|fn) 設定或獲取被選元素的屬性值，設定多個
jQuery——入門（三）JQuery DOM操作（核心處理和文件處理）
jQuery——入門（三）JQuery DOM操作（核心處理和文件處理） 一、核心處理（JQuery物件訪問） 1、頁面載入檢測函式：$(document).ready(function(){}); —— $(function(){}); 2、JQuery選擇器函式：$(select
jquery dom操作表格
表格編輯列中有控制元件，控制元件點選事件時繫結此方法 <table> <tr> <td> <input type="text" onclick="worktypeChange(this)"> <td