javascript - 在jQuery中将div包装在子div之外

这是我要与另一个div换行的代码段

<div class="ge-content ge-content-type-" data-ge-content-type="">
    <div class="what-we-do-box" id="service_box_1_hover_1" data-parentid="1" data-titlecolor="#000" data-titlehovercolor="#000" data-deschcolor="#000" data-deschovercolor="#000" data-iconbgcolor="#2F313A" data-iconhoverbgcolor="#000" data-hoverbgcolor="#2F313A" style="border-color: rgb(40, 143, 235); background-color: rgb(255, 255, 255);">
    <div class="what-we-do-icon-box" style="background-color: rgb(47, 49, 58);">            <i style="color: #fff;" class="fa fa-cloud"></i></div>
    <div class="what-we-do-box-content">

          <h4 style="color: #000">Enter Title</h4>

           <p style="color: #000">this is a demo description</p>

           <a style="color: #fff;background-color: #2F313A" href="" class="read-more">Read More</a>
        </div>
    </div>
</div>

这是我要包装在上述代码段之外的html部分。

<div class="component_box_row " data-compName="" id="component_box_row_">
<div class="component-inner ui-state-default">
    <div class="component_panel">
        <div class="component_header">
            <i class="fa fa-arrows"></i>
            <i id="'+ggggg+'_edit" class="fa fa-edit"></i>
            <i id="component_delete" class="fa fa-trash"></i>
        </div>
        <div class="component_body">
                    ***-- here i want to the first code snippet --****
        </div>
    </div>
</div>

所有这一切都需要动态地进行。页面加载时。第一个代码段已经执行。在那之后，我必须追加第二个代码段。我该如何处理。我尝试了jquery wrap函数，但无法为我工作

最佳答案

如果我理解正确，那么您想在运行时稍后将现有的元素块包装在另一个代码块中。

尝试这个

var ggggg = "";
var wrapper = '<div class="component_box_row " data-compName="" id="component_box_row_">\
<div class="component-inner ui-state-default">\
    <div class="component_panel"> \
        <div class="component_header">\
            <i class="fa fa-arrows"></i>\
            <i id="'+ggggg+'_edit" class="fa fa-edit"></i> \
            <i id="component_delete" class="fa fa-trash"></i>\
        </div>\
        <div class="component_body"> \
        </div> \
    </div>\
</div>';

/* the requested part */
var content = $('.ge-content:first').clone(true);
$('.ge-content:first').remove();
var wr = $(wrapper);
wr.find('.component_body:first').append(content);
$('body').append(wr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ge-content ge-content-type-" data-ge-content-type="">
    <div class="what-we-do-box" id="service_box_1_hover_1" data-parentid="1" data-titlecolor="#000" data-titlehovercolor="#000" data-deschcolor="#000" data-deschovercolor="#000" data-iconbgcolor="#2F313A" data-iconhoverbgcolor="#000" data-hoverbgcolor="#2F313A" style="border-color: rgb(40, 143, 235); background-color: rgb(255, 255, 255);">
    <div class="what-we-do-icon-box" style="background-color: rgb(47, 49, 58);">            <i style="color: #fff;" class="fa fa-cloud"></i></div>
    <div class="what-we-do-box-content">

          <h4 style="color: #000">Enter Title</h4>

           <p style="color: #000">this is a demo description</p>

           <a style="color: #fff;background-color: #2F313A" href="" class="read-more">Read More</a>
        </div>
    </div>
</div>