Question

我正在尝试使用JavaScript来创建动态列表，我需要使用大量引号来使<li>行正常工作，但我无法使用innerHTML输出正确的语法html doc。

这是我的JS：

function settabnumber() {
    alert("set tab number function called");
    var settabcount = 3;
    var menucode;
    var i=0;
    for(basetabcount = 0; basetabcount < settabcount; basetabcount++){
    i++;
    menucode = menucode + "<li><a href=\"#tabs-" + i + "\">" + tabnames[i] +    "</a></li>";
    }
    document.getElementById("eetabmenu").innerHTML = menucode;
}

有什么想法吗？

Answer 1

...试

menucode = menucode + '<li><a href="#tabs-' + i + '">' + tabnames[i] + '</a></li>';

始终使用单引号来保存HTML字符串，以便您可以自由使用强制性双引号。

Answer 2

我让JSFiddle尝试重现您的问题，但它没有发生：https://jsfiddle.net/qf19wvr0/

无论哪种方式，正如其他评论者所说，你应该使用单引号。或者，如果您在ES6环境中工作（使用像Babel这样的转发器），您可以使用模板字符串：

menucode += `<li><a href="#tabs-${i}">${tabnames[i]}</a></li>`

这使您的代码段更具可读性。

然而：

如果您正在做足够复杂的工作，而您正在循环收集并从字符串构建DOM节点，您可能需要考虑使用某种模板系统（如Handlebars，Mustache，React，或者任何类似的东西）来抽象你的一些视图创建逻辑。在JavaScript中使用HTML字符串是一个相当大的代码味道，可能意味着您将视图逻辑与业务逻辑混合在一起。

Answer 3

在双引号内使用单引号'或viseversa

menucode = menucode + '<li><a href="#tabs-' + i + '">' + tabnames[i] + '</a></li>';

OR

menucode = menucode + "<li><a href='#tabs-" + i + "'>" + tabnames[i] + "</a></li>";

第一个是首选

使用innerHTML内的引号不起作用

3 个答案:

然而：