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'));

Demo