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

你的意思是像这样的半动态的东西吗？

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

Answer 4

试试这个，

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