使用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，另一个用于将该类添加到新创建的元素。