1

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

これを行うより良い方法はありますか？

4

1 に答える 1

2

作成した「videoInfoInner」DIV で「videoInfo」DIV のコンテンツをラップし、その前に新しい「videoInfoShadow」DIV を貼り付けるだけです。

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

デモ

于 2013-07-04T10:38:16.247 に答える