动态添加数组内容作为新元素--JQuery

Question

编辑：问题解决了！我在加载之前修改了页面，所以脚本实际上没有做任何事情。我现在修好它并且有效。感谢您的帮助，我将不得不将这一点归结为jQuery的新手，这很奇怪。

长话短说我试图创建一个动态获取文章标题，缩略图，描述和链接的网页，并在页面上创建格式良好的列表。我试图在jQuery和HTML5中实现这一点。

以下是我将用于动态填充页面的示例数据。现在格式化并不重要，因为我可以在它完全工作之后再这样做。

<script>
var newsTitles = ["If It Ain&#39;t Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;

我试图使用上面数组的内容动态填充元素的代码部分。

<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
    <h1>Articles</h1>
    <!-- the column  for each news peice add an element with the thumbnail, the title and teh desc -->
    <script>
        for(i = 0; i < newsMax; i++) { 
            $("#articleList").append("<h3 href=&quot;" newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>", "<img src=&quot;"newsPics[i] + "&quot;>","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
        }
    </script>
    <div id="articleList">
        HELLO
    </div>
</td>

以下是最终看起来的样子，如果需要我可以发布更多信息，因为我知道这可能不够清楚，无法完全解释我的问题，但我无法确定。提前谢谢。

Answer 1

以下字符串是无效的html，缺少+

"<h3 href=&quot;" newsLinks[i] + "&quot;>"

您需要为html属性使用正确的引号，而不是&quote;

尝试

"<h3 href='" + newsLinks[i] + "'>"

OR

"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote

就个人而言，我更喜欢用单引号打开/关闭html字符串，但其中任何一个都可以使用

请注意，您应该在开发工具控制台中抛出语法错误，这会帮助您找到问题

Answer 2

试试这个

for(i = 0; i < newsMax; i++) { 
    $("#articleList").append("<h3 href=&quot;"+ newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>, <img src=&quot;"+newsPics[i] + "&quot;>, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}

新闻摘要的错误问题+拼写错误

Answer 3

    for(i = 0; i < newsMax; i++) { 
        $("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
        $("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" ); 

    }