javascript - jqueryのループにdiv要素を作成する

Question

Jquery で複数の div 要素を作成しようとしています。以下の解決策を試しました。

jquery で html を
作成する jQuery で div 要素を作成する

jqueryで以下のhtml要素を作成する必要があります

<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>

上記のソリューションでこれを行うことができますが、より複雑です.誰かが最新のjqueryでこれを行うためのより良い方法があると提案できますか.

Answer 1

var  str='<div class="r-c-grid ">'
        +'<div class="r-c-imgmask">'
         +'   <img src="http://example.com/images/path.jpg">'
        +'</div>'
        +'<div class="r-c-gradient"></div>'
        +'<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>'
    +'</div>';

$(str).appendTo(yourselector);

または試すことができます

$(yourselector).append(str);

デモを見る

append()およびappendTo()を参照

Answer 2

次のように、ブロック全体を一度に追加できます。

$('body').append('\
    <div class="r-c-grid "> \
        <div class="r-c-imgmask"> \
            <img src="http://example.com/images/path.jpg"> \
        </div> \
        <div class="r-c-gradient"></div> \
        <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3> \
    </div> \
');

このような文字列を構文エラーを起こさずに複数の行に分割するには、バックスラッシュが必要であることに注意してください。これにより、改行が効果的にコメントアウトされます。

Answer 3

これを試すだけで、

$('body').append('<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>');

または、試してみてください。

$rci=$('<div class="r-c-imgmask" />')
         .append('<img src="http://example.com/images/path.jpg">');
$rcg=$('<div class="r-c-gradient" />');
$h3=$('<h3 class="r-c-grid-title" />')
         .append('<a href="http://example.com/link.php">Post Title</a>');
$rc=$('<div class="r-c-grid " />').append($rci, $rcg, $h3);
$('body').append($rc);

Answer 4

このような半動的なものを意味しますか？

function addDiv(parentId, img, link, text){
    var div = '<div class="r-c-grid "><div class="r-c-imgmask">'+
        '<img src="http://example.com/images/'+img+'">'+
        '</div><div class="r-c-gradient"></div>'+
        '<h3 class="r-c-grid-title">'+
        '<a href='+link+'>'+text+'</a></h3></div>';
    document.getElementById(parentId).innerHtml += div;
}