Javascript本身生成html嵌套

Javascript generating html nesting in itself

本文关键字：html 嵌套 Javascript      更新时间：2023-09-26

所以我的代码在这里：

function day(time) {
    jQuery.parseJSON(time);
}
$(document).ready(function() {
    $.getJSON("http://www.freecodecamp.com/news/hot", function(news) {
        var html = "";
        var br = "</br>";
        news.forEach(function(val) {
            html += "'n'
    <div class='col-md-3'>'n'
    <div class = 'panel panel-default'>'n     <div class = 'panel-image'> 'n "
            html += "<img src='" + val.image + " 'width='100%' height='100%' />'n'
          </div>'n"
            html += "<a href='" + val.link + "'>" + val.headline + "</a></p>"
            html += "<p>by: <a href='http://www.freecodecamp.com/" + val.author.username + "'>" + val.author.username + "</a></p>"
            html += "<p> ♥" + " " + val.upVotes.length + "</p>"
            html += "<p>Posted on:" + day(val.timePosted)
            "</p>'n'
       </div>'n'
     </div>'n"
        });
        
        $(".stories").html(html);
      
    });
});

当它在代码中循环时，它应该单独生成，但是，这个函数的实际输出是生成代码，就好像它在col-md-3div.中嵌套了所有内容一样

有点像这样：

<div class="col-md-3">
         <div class="col-md-3'>
                .
                  .
                    .
                      <div...

您没有对带有结束标记的最后一个字符串执行任何操作：

html += "<p>Posted on:" + day(val.timePosted)
"</p>'n'
   </div>'n'
 </div>'n"

如果你想保持目前的结构：，你需要html +=

html += "<p>Posted on:" + day(val.timePosted)
html += "</p>'n'
   </div>'n'
 </div>'n"

我推荐像JSHint或ESLint这样的工具(http://eslint.org/)可以警告你这样的事情。例如，将代码粘贴到JSHint的在线linter中会显示

应为赋值或函数调用，但实际看到的却是表达式。

在有问题的线路上。

相关文章：