prependTo要素を使用すると、私は次のようHMTLを持って

Question

を消える：

<div class="modal fade in" id="data-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="data-confirmation-modal-label"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <span class="fa fa-exclamation-triangle"></span> 
      <h4 class="modal-title" id="data-confirmation-modal-label">Titile</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Example</p> 
      </div> 
      <div class="modal-footer"> 
      <button id="" type="button" class="btn-confirm">Conform</button> 
       <button type="button" class="btn-cancel" autofocus="" data-dismiss="modal">Avbryt</button> 
      </div> 
     </div> 
     </div> 
</div> 

私はフォーム要素を作成し、javasciptでフォーム要素内のモーダルコンテンツを置くしようとしています：

$form = $("<form></form>"); 
$form.prependTo($('.modal-content')); 

私が使用している場合上記のコード私はモーダルが空です。助けていただければ幸いです。 私は以下のようなHTMLになりたい：

<div class="modal fade in" id="data-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="data-confirmation-modal-label"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
     <form> 
       <div class="modal-header"> 
       <span class="fa fa-exclamation-triangle"></span> 
       <h4 class="modal-title" id="data-confirmation-modal-label">Titile</h4> 
       </div> 
       <div class="modal-body"> 
       <p>Example</p> 
       </div> 
       <div class="modal-footer"> 
       <button id="" type="button" class="btn-confirm">Conform</button> 
        <button type="button" class="btn-cancel" autofocus="" data-dismiss="modal">Avbryt</button> 
       </div> 
     </form> 
      </div> 
      </div> 
    </div> 

Answer 1

あなたはjqueryのラップhttp://api.jquery.com/wrap/ を使用してフォームと.modal-コンテンツをラップすることができたり、

$('.modal-content').html('<form>'+$('.modal-content').html()+'</form>') 

Answer 2

のように、フォームで全体のhtmlを書き換えることができますが、

$(".modal-content").children().wrapAll("<form></form>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade in" id="data-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="data-confirmation-modal-label"> 
 
     <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <span class="fa fa-exclamation-triangle"></span> 
 
      <h4 class="modal-title" id="data-confirmation-modal-label">Titile</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Example</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button id="" type="button" class="btn-confirm">Conform</button> 
 
       <button type="button" class="btn-cancel" autofocus="" data-dismiss="modal">Avbryt</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
</div>

1. .wrapAll()を使用してすべてのコンテンツをラップします。

Answer 3

次のコードを使用できます。

$(".modal-content").wrap("<form></form>").