使用jQuery,很容易增加新的元素/内容。
添加新的HTML内容
我们将着眼于被用来添加新的4个内容与jQuery方法:
- append() -插入内容的选定元素的末尾
- prepend() -插入内容的选定元素的开始
- after() -选择的元素后插入内容
- before() -所选元素之前插入内容
jQuery的append()方法
jQuery的append()方法插入内容在所选择的HTML元素的结束。
jQuery的prepend()方法
jQuery的prepend()方法插入内容在所选择的HTML元素的开始。
添加几个新元素有了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元素之前的内容。
添加几个新元素随着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>
}
试一试» 自测练习用!
jQuery的HTML参考
对于所有的jQuery HTML方法的完整概述,请访问我们的jQuery HTML / CSS参考 。