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

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

1 个答案: