javascript - jquery - add div to the child dynamically -

i want add warning div dynamically after seconddiv in html. please suggest how can achieve in jquery.

html:

<div class="panel panel-default">     <div class="panel-heading">      </div>     <div class="panel-body">         <div class="table-responsive" id="firstdiv">          </div>         <hr/>         <div class="table-responsive" id="seconddiv">          </div>         <hr/>         <div class="table-responsive" id="thirddiv">          </div>     </div> </div> 

warning div:

<div class="note note-warning">      <div class="block-warning">          <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> warning! header goes here</h4>         <p>warning </p>     </div> </div> 

as per javascript can use element.insertadjacenthtml(position, text).

one suggestion use id warning div:

var d1 = document.getelementbyid('seconddiv'), // target element    wd = document.getelementsbyclassname('note')[0].clonenode(true); // new copy of warning div    wd.id = 'warningdiv'; // put id div    d1.insertadjacenthtml('afterend', wd.outerhtml); // place div after target div  document.getelementbyid('warningdiv').style.display = 'block'; // show div if hidden

.note{display:none;}

<div class="note note-warning">    <h1>warning</h1>  </div>  <div class="table-responsive" id="seconddiv">    seconddiv  </div>

---

with jquery, can use .after():

var d1 = $('#seconddiv');  var wd = $('.note');  d1.after(wd);  wd.show();

.note {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="note note-warning">    <h1>warning</h1>  </div>  <div class="table-responsive" id="seconddiv">    seconddiv  </div>