Jquery DOM манипуляции с вложенными элементами

Question

Im изо всех сил, чтобы создать следующий HTML с помощью Jquery:

<div class="col-md-3 col-sm-6 hero-feature"> 
    <div class="thumbnail"> 
     <img src="http://placehold.it/800x500" alt=""> 
      <div class="caption"> 
       <h3>Feature Label</h3>     
       <p> 
        <a href="#" class="btn btn-default">More Info</a> 
       </p> 
      </div> 
     </div> 
    </div> 

Я получил это сейчас:

var new_div = $("<div>").attr("class","col-md-3 col-sm-6 hero-feature").append(
     $("<div>").attr("class","thumbnail").append(
       $("<div>").attr("class","caption") 
       .append($("<h3>").text('feature label') 
      ) 
    ) 

); 

который пятерки мне это:

<div class="col-md-3 col-sm-6 hero-feature"> 
    <div class="thumbnail"> 
     //Missing img 
     <div class="caption"> 
      <h3>hello</h3> 
     //Missing <p> and <a> 
     </div> 
    </div> 

M Возможно ли добавить отсутствующие элементы в эту настройку? Я хотел бы выполнить DOM-манипуляцию в разумно читаемом виде. Спасибо!

Я читал подобные вопросы здесь, но не мог понять, как применить его к моему делу.

Answer 1

var new_div = $("<div>").attr("class","col-md-3 col-sm-6 hero-feature").append(
 
    $("<div>").attr("class","thumbnail").append(
 
    $("<img>").attr("src","http://placehold.it/200x200") 
 
).append( 
 
    $("<div>").attr("class","caption").append(
 
     $("<h3>").text('feature label') 
 
    ).append(
 
     $("<p>").append(
 
     $("<a>").attr({"href":"#", "class":"btn btn-default"}).text("More Info") 
 
     
 
    ) 
 
    ) 
 
) 
 
); 
 

 
$('div').append(new_div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div>