jQuery 添加元素

使用jQuery，添加新元素/内容很容易。

添加新的 HTML 内容

我们将介绍 4 种用于添加新内容的 jQuery 方法:

append() - 在选定元素的末尾插入内容
prepend() - 在选定元素的开头插入内容
after() - 在选定元素后插入内容
before() - 在选定元素之前插入内容

jQuery append() 方法

jQuery append() 方法在所选 HTML 元素的末尾插入内容。

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });
  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

运行一下

jQuery prepend() 方法

jQuery prepend() 方法在所选 HTML 元素的开头插入内容。

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

运行一下

使用 append() 与 prepend() 添加新元素

在上面的两个实例中，我们只在所选 HTML 元素的开头/结尾插入了一些文本/HTML。

然而，append() 和 prepend() 方法都可以使用无限多的新元素作为参数。可以使用文本/HTML（就像我们在上面的实例中所做的那样）、jQuery 或 JavaScript 代码和 DOM 元素生成新元素。

在下面的实例中，我们创建了几个新元素。这些元素是用文本/HTML、jQuery 和JavaScript/DOM 创建的。然后我们用 append() 方法将新元素附加到文本中（prepend() 也适用）:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
function appendText() {
  var txt1 = "<p>Text.</p>";        // Create text with HTML
  var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery
  var txt3 = document.createElement("p");
  txt3.innerHTML = "Text.";         // Create text with DOM
  $("body").append(txt1, txt2, txt3);   // Append new elements
}
</script>
</head>
<body>
<p>这是一个段落</p>
<button onclick="appendText()">附加文本</button>
</body>
</html>

运行一下

jQuery after() 与 before() 方法

jQuery after() 方法在选定的 HTML 元素之后插入内容。

jQuery before() 方法在所选 HTML 元素之前插入内容。

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });
  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>
<body>
<img src="/images/demo.png" alt="jQuery" width="100" height="140"><br><br>
<button id="btn1">前面插入</button>
<button id="btn2">后面插入</button>
</body>
</html>

运行一下

使用 after() 与 before() 添加新元素

此外，after() 和 before() 方法都可以使用无限多的新元素作为参数。可以使用文本/HTML（就像我们在上面的例子中所做的那样）、jQuery 或 JavaScript 代码和 DOM 元素生成新元素。

在下面的实例中，我们创建了几个新元素。这些元素是用文本/HTML、jQuery 和 JavaScript/DOM 创建的。然后我们用 after() 方法将新元素插入到文本中（也适用于 before() ）:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
function afterText() {
  var txt1 = "<b>I </b>";           // Create element with HTML
  var txt2 = $("<i></i>").text("love ");  // Create with jQuery
  var txt3 = document.createElement("b");   // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);    // Insert new elements after img
}
</script>
</head>
<body>
<img src="/images/demo.png" alt="jQuery" width="100" height="140">
<p>单击按钮以在图像后插入文本。</p>
<button onclick="afterText()">后面插入</button>
</body>
</html>

运行一下

jQuery HTML 参考

有关所有 jQuery HTML 方法的完整概述，请访问本站的 jQuery HTML/CSS 参考。

jQuery 添加元素

添加新的 HTML 内容

jQuery append() 方法

实例

jQuery prepend() 方法

实例

使用 append() 与 prepend() 添加新元素

实例

jQuery after() 与 before() 方法

实例

使用 after() 与 before() 添加新元素

实例

jQuery HTML 参考

分类导航