如何使用jQuery在另一個HTML元素周圍添加HTML元素

Question

改天，另一個問題。 我有這樣的事情：

<p class="checkbox">
   <input name="cgv" id="cgv" value="1" type="checkbox">
   <label for="cgv">Some text.</label>
</p>

使用jQuery，我想將此代碼更改為：

<p class="checkbox">
   <div class="checker" id="uniform-cgv">
      <span>
         <input name="cgv" id="cgv" value="1" type="checkbox">
      </span>
   </div>
   <label for="cgv">Some text.</label>
</p>

因此，輸入元素#cgv在span和div元素內部。 我想通過此代碼執行此操作，但沒有任何結果。

$('#submitGuestAccount').click(function () {
        //True if parent is <p> element
        if ($('#cgv').parent().hasClass('checkbox')) {
            $('<span>').insertBefor('#cgv');
            $('</span>').insertAfter('#cgv');

        }
    });

有人可以幫助我解決我的問題嗎？

親切的問候

Answer 1

jQuery API有充分的文檔記錄： http : //api.jquery.com/wrap/ 。

 $("#cgv").wrap( "<div class=\\"checker\\" id=\\"uniform-cgv\\"><span></span></div>" ); 

 div{border:10px solid red} span{border:10px solid blue} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="checkbox"> <input name="cgv" id="cgv" value="1" type="checkbox"> <label for="cgv">Some text.</label> </p>