使用jQuery在頁面中添加一個新類

Question

我試圖用編程方式將error_icon類的DIV添加到使用jQuery的頁面中。這是HTML：

<div id="error_icon_holder"></div> 

當他們補充說，標記應類似於：

<div id="error_icon_holder"> 
    <div class="error_icon"></div> 
</div> 

我試着用.addClass，但導致：

<div id="error_icon_holder" class="error_icon"></div> 

而且我也嘗試.after這也沒有工作。有人可以讓我知道如何做到這一點？謝謝。

Answer 1

你想.append()

$('#error_icon_holder').append('<div class="error_icon"></div>'); 

• http://api.jquery.com/append/

---

你還可以翻轉它周圍，並使用.appendTo()。

$('<div class="error_icon"></div>').appendTo('#error_icon_holder'); 

• http://api.jquery.com/appendTo/

---

或者因爲error_icon_holder顯示爲空，你可以使用.html()。 （這通常會覆蓋任何現有的內容。）

$('#error_icon_holder').html('<div class="error_icon"></div>'); 

• http://api.jquery.com/html/

Answer 2

，讓您創建後有機會獲得error_icon DIV您可以使用此：

var errorIcon = $('<div/>'); 
errorIcon.addClass('error_icon'); 
$('#error_icon_holder').append(errorIcon); 

Answer 3

爲了擴大patrick提供的內容，.append()將保留error_icon_holder div內的任何現有內容。如果您想完全替換內容，請使用.html()。

如果您不想將error_icon類包含在內部div創建語句中，您需要兩條單獨的語句，一個用於在DOM樹中創建內部div，另一個用於將該類添加到新創建的元素。