добавить HTML в середине родителя в JQuery

Question

мой код

<div class="col-lg-6 stickyboard" style="padding:5px;"> 
    <div class="sticky-container" > 
     <div class="sticky" > 
      <h4>{{title}}</h4> 
      {{content}} 
     </div> 
     // If click on this 
     <i class="mdi-content-add pull-right" id="addNewSticky"></i> 
    </div> 
</div> 
//Here I want to add some html 
<div class="col-lg-6 stickyboard" style="padding:5px;"> 
    <div class="sticky-container" > 
     <div class="sticky" > 
      <h4>{{title}}</h4> 
      {{content}} 
     </div> 
     <i class="mdi-content-add pull-right" id="addNewSticky"></i> 
    </div> 
</div> 

Когда кто-то нажимает на addnewsticky Я хочу, чтобы добавить HTML немедленно после того, что липкая,

Ожидаемый результат

<div class="col-lg-6 stickyboard" style="padding:5px;"> 
     <div class="sticky-container" > 
      <div class="sticky" > 
       <h4>{{title}}</h4> 
       {{content}} 
      </div> 
      // If click on this 
      <i class="mdi-content-add pull-right" id="addNewSticky"></i> 
     </div> 
    </div> 
    <h3>Hi this is added html</h3> 
    <div class="col-lg-6 stickyboard" style="padding:5px;"> 
     <div class="sticky-container" > 
      <div class="sticky" > 
       <h4>{{title}}</h4> 
       {{content}} 
      </div> 
      <i class="mdi-content-add pull-right" id="addNewSticky"></i> 
     </div> 
    </div> 

См. Недавно добавленный html <h3> тег

Как это сделать с помощью jquery?

addNewSticky:function(e,tmpl){ 
     $(e.currentTarget).parent().parent().find('.stickyboard').html("some html"); 
    } 

, но это добавляет к самому же классу не после этого класса

Answer 1

Вы можете вставить его после .stickyboard предка цели щелчка.

Так

$(e.currentTarget).closest('.stickyboard').after("<h3>Hi this is added html</h3>"); 

Answer 2

Вы можете использовать .after() также как:

addNewSticky:function(e,tmpl){ 
     $(e.currentTarget).parent().parent().after("some html"); 
    }