jQuery 添加和刪除HTML元素

節(jié)我們學(xué)習(xí)如何使用 jQuery 中的方法來(lái)添加和刪除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下幾種：

方法	描述
append()	在所選元素的末尾插入內(nèi)容
prepend()	在選定元素的開頭插入內(nèi)容
after()	在選定元素后插入內(nèi)容
before()	在選定元素之前插入內(nèi)容

而用于刪除元素的方法有：

方法	描述
remove()	刪除被選元素容，包括子元素
empty()	刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容

append()方法

append() 方法可以在指定元素的末尾插入內(nèi)容。

語(yǔ)法如下：

$(selector).append(content,function(index,html))

content：規(guī)定要插入的內(nèi)容，可以包含 HTML 元素、jQuery 對(duì)象、DOM 元素。
function(index,html)：規(guī)定返回待插入內(nèi)容的函數(shù)，index 為集合中元素的索引位置，html 為被選元素的當(dāng)前 HTML。

示例：

我們來(lái)看下面這個(gè)例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("俠課島");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

點(diǎn)擊按鈕，在指定的 標(biāo)簽?zāi)┪蔡砑游谋緝?nèi)容 “俠課島”，我們可以在瀏覽器中看一下演示結(jié)果：

除了文本內(nèi)容，我們還可以在元素中添加 HTML ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示結(jié)果：

prepend()方法

prepend() 方法其實(shí)和 append() 方法類似，語(yǔ)法也差不多。但是 prepend() 方法主要用于在被選元素的開頭插入指定內(nèi)容。

語(yǔ)法如下：

$(selector).prepend(content,function(index,html))

示例：

我們將上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在瀏覽器中的演示結(jié)果：

after()方法

after() 方法用于在被選元素后插入指定的內(nèi)容。看起來(lái) after() 方法和 append() 方法的作用好像差不多，但是其實(shí)兩個(gè)方法還是有區(qū)別的。 append() 方法是在被選元素的結(jié)尾插入內(nèi)容，插入的內(nèi)容仍然在元素內(nèi)部。而 after() 插入的內(nèi)容會(huì)重新起一行，與被選擇的元素并沒(méi)有什么邏輯上的聯(lián)系。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>俠課島</p>");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>點(diǎn)擊追加文本</button>
</body>
</html>

在瀏覽器中的演示效果：

before()方法

before() 方法用于在被選元素之前插入指定的內(nèi)容。它和 prepend() 方法的區(qū)別在于一個(gè)在被選元素內(nèi)插入內(nèi)容，一個(gè)在被選元素外。

注意 before() 方法和 after() 方法都是在被選元素外插入內(nèi)容。append() 和 prepend() 方法都是在被選元素內(nèi)插入內(nèi)容。

示例：

例如將上述示例中的方法改為 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>俠課島</p>");
    });
});

在瀏覽器中的演示效果：

remove()方法

remove() 方法用于刪除被選元素及其子元素。該方法也會(huì)刪除被選元素的數(shù)據(jù)和事件。

示例：

例如下面這個(gè)例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好，歡迎來(lái)到俠課島！</p>
  <button>點(diǎn)擊刪除</button>
</body>
</html>

在瀏覽器中的演示效果：

從上圖中可以看到，remove() 方法將指定的 p 元素連標(biāo)簽帶元素全部刪除。

empty()方法

empty() 方法用于刪除被選元素的所有子節(jié)點(diǎn)和內(nèi)容。該方法不會(huì)移除元素本身，或它的屬性。

示例：

我們講上述示例中的 remove() 方法改為empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在瀏覽器中的演示效果：

可以看到 empty() 方法只會(huì)刪除指定元素中的內(nèi)容，不會(huì)刪除元素本身，當(dāng)然如果元素上有屬性，屬性也不會(huì)被刪除，大家可以自己試一下。

tml([val|fn]) 返回值:String

取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

在一個(gè) HTML 文檔中, 我們可以使用 .html() 方法來(lái)獲取任意一個(gè)元素的內(nèi)容。

如果選擇器匹配多于一個(gè)的元素，那么只有第一個(gè)匹配元素的 HTML 內(nèi)容會(huì)被獲取。

function(index, html) Function

此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù)，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的內(nèi)容。

jQuery 代碼:

$('p').html();

設(shè)置所有 p 元素的內(nèi)容

jQuery 代碼:

$("p").html("Hello <b>world</b>!");

使用函數(shù)來(lái)設(shè)置所有匹配元素的內(nèi)容。

jQuery 代碼:

$("p").html(function(index,n){
    return "這個(gè) p 元素的 index 是：" + n;
});

text([val|fn]) 返回值:String

val String 用于設(shè)定HTML內(nèi)容的值

function(index, html) Function 此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù)，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的文本內(nèi)容。

jQuery 代碼:

$('p').text();

設(shè)置所有 p 元素的文本內(nèi)容

jQuery 代碼:

$("p").text("Hello world!");

使用函數(shù)來(lái)設(shè)置所有匹配元素的文本內(nèi)容。

jQuery 代碼:

$("p").text(function(index,n){
    return "這個(gè) p 元素的 index 是：" + n;
});
$("#test").html();

意思是指：獲取ID為test的元素內(nèi)的html代碼。其中html()是jQuery里的方法

這段代碼等同于用DOM實(shí)現(xiàn)代碼：

document.getElementById("test").innerHTML;

直接獲取、編輯內(nèi)容

在jQuery中，主要是通過(guò)html()和text()兩種方法來(lái)獲取和編輯頁(yè)面內(nèi)容的。其中html()相當(dāng)于獲取節(jié)點(diǎn)的innerHTML屬性，

添加參數(shù)html(text)時(shí),則為設(shè)置innerHTML;而text()則用來(lái)獲取元素的純文本，text(content)為設(shè)置純文本。

實(shí)例1:

jQuery代碼:

$(function(){
    var sString = $("p:first").text(); //獲取純文本
    $("p:last").html(sString);
});

HTML代碼:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

實(shí)例2:

jQuery代碼:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //獲取innerHTML
        $(this).text(sHtmlStr); //將代碼做為純文本傳入
    });
});

HTML代碼:

文本段落示例

實(shí)例3：獲取選擇框的文本

$("#id").find("option:selected").text(); //獲取Select選擇的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
獲取為本</button>
</body>
</html>

$().html(); //獲得節(jié)點(diǎn)包含的信息

$().html(信息); //設(shè)置節(jié)點(diǎn)包含的內(nèi)容

$().text(); //獲得節(jié)點(diǎn)包含的"文本字符串信息"內(nèi)容

$().text(信息); //設(shè)置節(jié)點(diǎn)包含的內(nèi)容(有html標(biāo)簽就把"><"符號(hào)變?yōu)榉?hào)實(shí)體)

注意: DOM操作必須保住DOM節(jié)點(diǎn)必須存在, 當(dāng)然也包括使用css樣式display:none隱藏的DOM節(jié)點(diǎn), 否則會(huì)導(dǎo)致js語(yǔ)法錯(cuò)誤;

看下面的動(dòng)圖，了解一下本例最后實(shí)現(xiàn)的效果。

attr();本身是設(shè)置標(biāo)簽屬性用的，這里用來(lái)設(shè)置樣式和獲取樣式。
addClass();這個(gè)是追加樣式。
removeClass();這是移除樣式。
toggleClass();這是切換樣式，切換的意思很簡(jiǎn)單，有就刪除，沒(méi)有就追加。
hasClass();判斷樣式是否存在。

一、我們先做一個(gè)盒子，給它最基本的樣式，就是寬和高。

二、忘記了，還要鏈接jQuery庫(kù)，我們就連官網(wǎng)的庫(kù)吧。

三、現(xiàn)在打開網(wǎng)頁(yè)什么都看不見(jiàn)，我們加個(gè)按鈕“添加紅色背景”，同時(shí)也添加一個(gè)樣式addred。

四、現(xiàn)在可以添加按鈕的點(diǎn)擊事件了，點(diǎn)擊事件先留個(gè)空，一步一步來(lái)。

五、接下來(lái)可以在事件里面放操作了，這里就給box追加樣式addred。

六、后面就不啰嗦了，一口氣直接再添加三個(gè)按鈕，三個(gè)空的點(diǎn)擊事件。

七、先試著去掉背景。

八、忘記了，還要添加一個(gè)邊框樣式togborder。

九、toggleClass()它是有則刪，無(wú)則加，所以稱為切換。

十、hasClass()是判斷樣式是否存在，這里我們用alert消息框輸出結(jié)果。

十一、忘記一個(gè)方法了，那就是attr()，再加一個(gè)按鈕，再加一個(gè)點(diǎn)擊事件。

本文來(lái)源于，落筆承冰原創(chuàng)，下面是源碼。

在線咨詢

上一篇：html5+css3實(shí)現(xiàn)三款好看的告白愛(ài)心特效，趕緊去給女朋友演示吧
下一篇：前端程序員入門html的4大方法，這兩本神書真心經(jīng)典！

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

jQuery 添加和刪除HTML元素

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

您的項(xiàng)目需求