如何使用jquery添加html

Posted 2023-03-11

【中文标题】如何使用jquery添加html

【英文标题】：how to add html using jquery

【发布时间】：2013-10-05 17:12:30

【问题描述】：

我有一些简单的 jquery 代码，我用它来动态创建 this page 而不是手动创建。这是我的代码

循环

for ( var i = 0; i < links.length; i++ ) 
    $("#programs").append(
        $("li")
        .html("div")
        .html("a", 
            href: links[i] + ".exe"
        )
        .html("img", 
            src: icons[i]
        )
        .html("p")
        .html(captions[i])
    );

数组声明

var links = ["pictureVeiwer","maze","firefoxPrank"];

var icons = ["firefox-icon.gif","maze.jpg","imageVeiwer.jpg"];

var captions = ["Cute Firfox prank","Cool maze","Program to veiw pictures... kinda useless in 2013"];

我认为我的语法有点不对劲，我之前使用过类似的代码，但不是在循环中。我做错了什么，我该怎么做？

fiddle.

【参考方案1】：

$("li")选择页面上所有的li元素，其实你并没有创建新元素，应该是：

$("<li/>");

或：

$("<li></li>");

另外你链接.html() 覆盖以前内容的方法，我建议单独创建元素，像这样：

for (var i = 0; i < links.length; i++) 
    var $li = $("<li/>"),
        $a = $("<a/>",  href: links[i] + ".exe", text: 'whatever' ),
        $img = $('<img/>',  src: icons[i] );
        $div = $('<div/>').append($a).append($img);

    $li.append($div).appendTo('#programs');  
      // |          |
      // |          ---- append the `li` element to #programs            
      // |           
      // ---- append to the `li` element

如果您要动态生成许多元素，您可以考虑使用模板库，如 Handlebars、EJS 或 Mustache。

【讨论】：

感谢到目前为止的帮助，但我仍然得到这个 - jsfiddle.net/mendelthecoder/zwhgw/3 - 它添加了html 在元素之外

@tryingToGetProgrammingStraight .append() 方法不返回附加元素，它返回当前集合，这就是我建议单独创建元素的原因，你目前正在做的是写意大利面条式/无法管理的代码（抱歉）会产生意想不到的结果。

你能在里面写一个“img”吗？

【参考方案2】：

我想我在这里工作了。有点冗长，但也更清楚：

for ( var i = 0; i < links.length; i++ ) 
    // Each list item will contain a div
    var $li = $("<li/>")

    // Each div will have a link, and that link will have an image and a caption
    var $div = $("<div/>");

    // Give the link its image
    var $a = $("<a/>", 
        href: links[i] + ".exe"
    );
    var $img = $("<img/>", 
        src: icons[i]
    );
    $a.append($img);

    // Give the link its caption
    $p = $("<p/>");
    $p.html(captions[i]);
    $a.append($p);

    // Give the div its link
    $div.append($a);

    // Give the list item its div
    $li.append($div);

    // Add the list item to the list
    $("#programs").append($li);

Fiddle （您需要在自己的网站上试用，您的图片可以在该网站上引用。）

【讨论】：

输出是 <li> <div> <a href="firefoxPrank.exe"> <img> </a> <p>Program to veiw pictures... kinda useless in 2013</p> </div> </li> (1) p 在 a 之外 (2) 在 img 中没有 src

已修复问题 (1) - jsfiddle.net/mendelthecoder/zwhgw/6 如果您也可以修复 src 问题，我将接受

找到并修复 (2) - jsfiddle.net/mendelthecoder/zwhgw/8 - 在 img 之前缺少 $(（以及结束 )）

哎呀，我错过了。很高兴你抓住了它。我会为后代解决我的答案。

Revision 8 (jsfiddle.net/mendelthecoder/zwhgw/8) 看起来可行。 borisute.com/geshem/2013/mkeller/programs.html 有什么不工作的地方吗？

【参考方案3】：

你也可以使用模板，就像 Underscore 提供的那样：

HTML：

<script type="text/template" id="list-template">
    <li>
        <div>
            <a href="<%= href %>"><img src="<%= src %>"></a>
            <p><%= caption %></p>
        </div>
    </li>
</script>

<ul id="programs"></ul>

<script src="http://underscorejs.org/underscore-min.js"></script>

JS：

var $programsList = $('#programs');
var listTemplateHtml = $('#list-template').html();
for ( var i = 0; i < 3; i += 1 ) 
    var li = _.template(listTemplateHtml, 
        href: links[i] + ".exe",
        src: icons[i],
        captions: captions[i]
    );
    $programsList.append(li);

这会更容易和更易于维护，并且可能也会产生更好的性能。