jQuery 添加和删除HTML元素

节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。

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

方法	描述
append()	在所选元素的末尾插入内容
prepend()	在选定元素的开头插入内容
after()	在选定元素后插入内容
before()	在选定元素之前插入内容

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

方法	描述
remove()	删除被选元素容，包括子元素
empty()	删除被选元素的所有子节点和内容

append()方法

append() 方法可以在指定元素的末尾插入内容。

语法如下：

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

content：规定要插入的内容，可以包含 HTML 元素、jQuery 对象、DOM 元素。
function(index,html)：规定返回待插入内容的函数，index 为集合中元素的索引位置，html 为被选元素的当前 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(){
      $("p").append("侠课岛");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>点击追加文本</button>
</body>
</html>

点击按钮，在指定的 标签末尾添加文本内容 “侠课岛”，我们可以在浏览器中看一下演示结果：

除了文本内容，我们还可以在元素中添加 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>点击追加文本</button>
</body>
</html>

在浏览器中的演示结果：

prepend()方法

prepend() 方法其实和 append() 方法类似，语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。

语法如下：

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

示例：

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

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

然后看一下在浏览器中的演示结果：

after()方法

after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多，但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容，插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行，与被选择的元素并没有什么逻辑上的联系。

示例：

<!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>点击追加文本</button>
</body>
</html>

在浏览器中的演示效果：

before()方法

before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容，一个在被选元素外。

注意 before() 方法和 after() 方法都是在被选元素外插入内容。append() 和 prepend() 方法都是在被选元素内插入内容。

示例：

例如将上述示例中的方法改为 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>侠课岛</p>");
    });
});

在浏览器中的演示效果：

remove()方法

remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。

示例：

例如下面这个例子：

<!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>你好，欢迎来到侠课岛！</p>
  <button>点击删除</button>
</body>
</html>

在浏览器中的演示效果：

从上图中可以看到，remove() 方法将指定的 p 元素连标签带元素全部删除。

empty()方法

empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身，或它的属性。

示例：

我们讲上述示例中的 remove() 方法改为empty() 方法，看看有什么不同：

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

在浏览器中的演示效果：

可以看到 empty() 方法只会删除指定元素中的内容，不会删除元素本身，当然如果元素上有属性，属性也不会被删除，大家可以自己试一下。

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

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

function(index, html) Function

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

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

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});

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

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

$('p').text();

设置所有 p 元素的文本内容

jQuery 代码:

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

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

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

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("test").innerHTML;

直接获取、编辑内容

在jQuery中，主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性，

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本，text(content)为设置纯文本。

实例1:

jQuery代码:

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

HTML代码:

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

实例2:

jQuery代码:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //获取innerHTML
        $(this).text(sHtmlStr); //将代码做为纯文本传入
    });
});

HTML代码:

文本段落示例

实例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(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的"文本字符串信息"内容

$().text(信息); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

看下面的动图，了解一下本例最后实现的效果。

attr();本身是设置标签属性用的，这里用来设置样式和获取样式。
addClass();这个是追加样式。
removeClass();这是移除样式。
toggleClass();这是切换样式，切换的意思很简单，有就删除，没有就追加。
hasClass();判断样式是否存在。

一、我们先做一个盒子，给它最基本的样式，就是宽和高。

二、忘记了，还要链接jQuery库，我们就连官网的库吧。

三、现在打开网页什么都看不见，我们加个按钮“添加红色背景”，同时也添加一个样式addred。

四、现在可以添加按钮的点击事件了，点击事件先留个空，一步一步来。

五、接下来可以在事件里面放操作了，这里就给box追加样式addred。

六、后面就不啰嗦了，一口气直接再添加三个按钮，三个空的点击事件。

七、先试着去掉背景。

八、忘记了，还要添加一个边框样式togborder。

九、toggleClass()它是有则删，无则加，所以称为切换。

十、hasClass()是判断样式是否存在，这里我们用alert消息框输出结果。

十一、忘记一个方法了，那就是attr()，再加一个按钮，再加一个点击事件。

本文来源于，落笔承冰原创，下面是源码。

在线咨询

上一篇：html5+css3实现三款好看的告白爱心特效，赶紧去给女朋友演示吧
下一篇：前端程序员入门html的4大方法，这两本神书真心经典！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery 添加和删除HTML元素

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

您的项目需求