在jquery中循环创建div元素答案

【问题标题】：Create div element in loop in jquery在jquery中循环创建div元素
【发布时间】：2013-11-11 20:48:03
【问题描述】：

我正在尝试在 Jquery 中创建多个 div 元素。我尝试过以下解决方案。

create html with jquery
Creating a div element in jQuery

我需要在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 中有没有更好的方法来做到这一点。

【问题讨论】：

显示您已有的代码，以便我们提出改进方法，而不必从头开始。
只需将HTML代码包装在$( )..
我想你需要动态的，对吧？
是的，在特定情况下，我想在我的容器 div 中附加这个多个 r-c-grid div。是的，我可以按照@Rituraj 的建议通过附加来实现这一点。但是有什么方法可以创建 dom 元素并添加类并附加内部 html。

标签： javascript jquery

【解决方案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);

查看DEMO

参考append()和appendTo()

【讨论】：

为什么是全局变量？或者你忘了使用var？
FWIW，在所有建议的方法中（包括我的），这似乎达到了最佳性能。不过，这让我有了一个有趣的发现：为什么这种方法（将大量字符串添加在一起）几乎是添加一个完整字符串的两倍？在此处查看测试：jsperf.com/adding-html-as-string

【解决方案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> \
');

请注意，需要使用反斜杠将这样的字符串分成多行，而不会导致语法错误。这有效地消除了换行符。

【讨论】：

最近，我也做了同样的事情，但是没有用。现在我明白了为什么......因为我没有计算代码后每行中的尾随空格来添加转义字符，就像你在这里所做的那样：D。如果转义字符后有空格，那么一切都会搞砸。

【解决方案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);

【讨论】：

【解决方案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;
}

【讨论】：