CODEWITHSUNDEEP
jquerydom
user2915962
user2915962

Reputation: 2711

Jquery DOM manipulation with nested elements

Im struggling to create the following HTML using 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>

I got this now:

 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')
              )
      )

  );

which fives me this:

<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>

Maybe its not possible to add the missing elements with this setup? I would like to accomplish the DOM-manipulation in areasonable readable way. Thank you!

I´ve read similar questions here but couldnt figure out howto apply it to my case.

Upvotes: 1

Views: 80

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

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>

Upvotes: 2

Related Questions