jquery - добавить div к ребенку динамически

Я хочу добавить это предупреждение div динамически после SecondDiv в мой HTML. Просьба предложить, как мы можем добиться этого в jquery.jquery - добавить div к ребенку динамически

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>

ПРЕДУПРЕЖДЕНИЕ ДИВ:

<div class="note note-warning"> 
    <div class="block-warning"> 
     <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4> 
     <p>Warning </p> 
    </div> 
</div>

источник

2016-01-27 JavaUser

Что вы подразумеваете под «динамическим» здесь, в каком контексте? – Satpal

document.getElementById ('SecondDiv'). AppendChild (document.getElementById ('warningDiv') ;. Я бы поместил идентификатор в ваш предупреждающий div, чтобы добавить этот путь – thatOneGuy

$ ("# SecondDiv"). Append ($ (" #warningDiv ") .html()) – Rajesh

Принято считать, что он находится на странице загрузки. Вы можете сделать это, как этот

$(function() { 
    $('.note.note-warning').appendTo($('#SecondDiv'));  
});

источник

2016-01-27 10:44:59 slashsharp

Вы можете сделать это с помощью следующих after функции.

$('#SecondDiv').after('<div class="note note-warning"><div class="block-warning"><h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4><p>Warning </p></div></div>');

источник

2016-01-27 10:45:10 Azim

Это то, что вам нужно?

document.getElementById('SecondDiv').appendChild(document.getElementById('warnin‌gDiv');.

Я бы поместил идентификатор в ваш предупреждающий div, чтобы добавить этот путь.

Только что заметил, что вы сказали JQUERY.

$('#warningDiv').appendTo($('#SecondDiv');

источник

2016-01-27 10:45:13 thatOneGuy

Согласно javascript, вы можете использовать Element.insertAdjacentHTML(position, text).

Одно из предложений заключается в использовании Id на предупреждение DIV:

var d1 = document.getElementById('SecondDiv'), // target element 
 
    wd = document.getElementsByClassName('note')[0].cloneNode(true); // get a new copy of warning div 
 

 
wd.id = 'warningDiv'; // put an id to this div 
 

 
d1.insertAdjacentHTML('afterend', wd.outerHTML); // place the div after target div 
 
document.getElementById('warningDiv').style.display = 'block'; // show the div if hidden

.note{display:none;}

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

С JQuery, вы можете использовать .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>

источник

2016-01-27 10:48:14 Jai

@thisOneGuy просто обновляется с помощью jQuery. – Jai

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<style type="text/css"> 
    .selected{ 
     background-color : green; 
    } 
    </style> 
<script> 





    $(document).ready(function() { 

     szDiv = '<div class="note note-warning"> <div class="block-warning"> <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4><p>Warning </p></div></div>'; 


     $(szDiv).insertAfter("#SecondDiv") 
    }); 




</script> 
</head> 
<body> 
    <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> 
</body> 
</html>

источник

2016-01-27 10:53:09 Aswathy

jquery - добавить div к ребенку динамически

ответ

Смежные вопросы