最新的Web开发教程
 

jQuery - 添加元素


使用jQuery,很容易增加新的元素/内容。


添加新的HTML内容

我们将着眼于被用来添加新的4个内容与jQuery方法:

  • append() -插入内容的选定元素的末尾
  • prepend() -插入内容的选定元素的开始
  • after() -选择的元素后插入内容
  • before() -所选元素之前插入内容

jQuery的append()方法

jQuery的append()方法插入内容在所选择的HTML元素的结束。

$("p").append("Some appended text.");
试一试»

jQuery的prepend()方法

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

$("p").prepend("Some prepended text.");
试一试»

添加几个新元素有了append()prepend()

在以上两个例子中,我们只在选定的HTML元素的开始/结束插入的一些文本/ HTML。

然而,无论是append()prepend()方法可采取新的元素作为参数的无限数量。 新的元素可以与文本/ HTML来生成(如我们在上述实施例中已经做了),与jQuery,或者与JavaScript代码和DOM元素。

在下面的例子中,我们创造了一些新的元素。 这些元素用文本/ HTML,jQuery和JavaScript的/ DOM创建。 然后我们追加新要素文本与append()方法(这会已经工作了prepend()太):

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
试一试»

jQuery的after()before()方法

jQuery的after()方法将所选择的HTML元素后的内容。

jQuery的before()方法将所选择的HTML元素之前的内容。

$("img").after("Some text after");

$("img").before("Some text before");
试一试»

添加几个新元素随着after()before()

此外,这两个after()before()的方法可能需要新的元素作为参数的无限数量。 新的元素可以与文本/ HTML来生成(如我们在上面的例子已经完成),用jQuery,或者与JavaScript代码和DOM元素。

在下面的例子中,我们创造了一些新的元素。 这些元素用文本/ HTML,jQuery和JavaScript的/ DOM创建。 然后,我们将新的元素,以其中的文本使用after()方法(这会已经工作了before()太):

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>
}
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4»


jQuery的HTML参考

对于所有的jQuery HTML方法的完整概述,请访问我们的jQuery HTML / CSS参考