javascript - JQuery-将元素的当前html附加到元素的新子元素

Question

我想根据 javascript 中的某些条件动态更改我的 HTML。我有以下 HTML 结构：

<div class="videoInfo">
    <h4>My Title</h4>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <p>My description</p>
    <div class="clearfix"></div>
</div>

运行我的脚本后，我想要这样的 HTML：

<div class="videoInfo">
    <div class="videoInfoShadow"></div>
    <div class="videoInfoInner">
        <h4>My Title</h4>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <p>My description</p>
        <div class="clearfix"></div>
    </div>
</div>

我可以使用以下代码执行此操作：

 var videoInfoHtml = $(".videoInfo").html();
 $(".videoInfo").html("");
 $(".videoInfo").append('<div class="videoInfoShadow">');
 $(".videoInfo").append('<div class="videoInfoInner">');
 $(".videoInfoInner").html(videoInfoHtml);

有没有更好的方法来做到这一点？

Answer 1

只需用您创建的 'videoInfoInner' DIV 包装您的 'videoInfo' DIV 的内容，并将新的 'videoInfoShadow' DIV 粘贴在它前面：

var videoInfo = $('.videoInfo');
videoInfo.wrapInner($(document.createElement('div')).addClass('videoInfoInner'));
videoInfo.prepend($(document.createElement('div')).addClass('videoInfoShadow'));

演示