如何使用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>