jquery - 動態添加div到

我想在我的HTML中動態添加此警告div SecondDiv。請建議我們在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：

<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中添加一個ID以添加此方式 – 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中添加一個ID來添加這種方式。

剛纔注意到你說的是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到

回答

相關問題