jQuery dom_add

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

添加新的HTML内容

我们将看到有4个jQuery方法可以添加新的内容：

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

jQuery append() 方法

jQuery append() 方法将在选定元素的结尾插入内容

$("p").append("Some appended text.");

让我试试

jQuery prepend() 方法

jQuery prepend() 在选定元素的开头插入内容

$("p").prepend("Some prepended text.");

让我试试

使用append()和prepend()添加几个新的元素

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

然而，append()和prepend()方法可以把新的元素无限数量作为参数添加。新的元素可以用文本/ HTML、jQuery、JavaScript代码和DOM元素生成（像我们在上面的例子）。

下面的实例, 我创建了几个新元素. 使用 text/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.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements
}

让我试试

jQuery after() 和 before() 方法

jQuery after() 在选定元素后插入内容

jQuery before() 在选定元素前插入内容

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

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

让我试试

添加多个新元素使用after()和before()

另外，after()和before()方法可以把新的元素无限数量的作为参数添加。新的元素可以用文本/ HTML、jQuery、JavaScript代码和DOM元素生成（像我们做了上面的例子。

下面的实例, 我创建了几个新元素. 使用 text/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>
}

让我试试