如何在多行 innerHTML 属性的 javascript 中包含 if 语句？答案

【问题标题】：How to include an if statement within the javascript of a multiple line innerHTML property?如何在多行 innerHTML 属性的 javascript 中包含 if 语句？
【发布时间】：2020-12-06 22:26:48
【问题描述】：

我正在使用 java-script 使用 innerHTML 属性在我的 html/php 页面上基于 js 变量呈现动态 svg。

这是一个复杂的 svg，所以我将字符串拆分为多行。

我当前的代码运行良好；

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

但是，如果我将任何行包装在 if 语句中，那么即使满足 if 语句的条件，该行也永远不会呈现。

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
if (test == 'on') {
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
}
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

有没有不同/更好的方法来做到这一点？我错过了什么吗？

【问题讨论】：

这不是动态构建字符串的方式。我确信控制台中的错误消息指向我们。
控制台没有显示错误。如果没有任何其他信息，这不是一个特别有用的评论。我确实问过是否有不同/更好的方法来做到这一点，所以我很高兴听到你可能有的任何解释。

标签： javascript if-statement svg innerhtml

【解决方案1】：

您可以在将字符串设置为 innerHTML 之前构建字符串：

let text = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
if (test == 'on') {
    text += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>';
}
text += '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>' + '</svg>';
document.getElementById('diagram1').innerHTML = text;

或者你可以使用三元：

document.getElementById('diagram1').innerHTML
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">'
+ (test == 'on' ? '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>' : '')
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

【讨论】：

【解决方案2】：

您可以使用ternary operator。

document.getElementById('diagram1').innerHTML 
= '<svg width="'+canvas_width+'" height="'+canvas_height+'">' +
(test == 'on' ? 
'<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
: '')
+ '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

【讨论】：

【解决方案3】：

您可以使用template literals 来做同样的事情。因此，如果您有任何条件，您可以将其包含在您的 HTML 中 -

`...some html before codition${test === 'on' ? 'when condition is true':null}`

此外，在这种情况下，模板文字将是更好的选择，而不是多个 +，您可以以更短、更有效的方式对模板文字执行相同操作。

如果您仍然只想使用字符串，您可以尝试使用 三元运算符，就像我在上面使用模板文字所做的那样。另一种选择是将字符串拆分为多行，并根据您要应用的条件有条件地附加 HTML 代码。

【讨论】：

【解决方案4】：

let defaultText = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
let extraText = '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>';
let endText = '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

document.getElementById('diagram1').innerHTML = test == 'on' ?  defaultText + endText : defaultText + extraText + endText;

【讨论】：

【解决方案5】：

您必须将它存储在一个变量中，然后在您的 if 子句中将其添加到此变量中，然后再添加其余部分。您没有将 innerHTML 正确构建在一起，if 和 behind 中的所有部分都被遗漏了，因此您会遇到这些丢失部分的麻烦。

let innerHTML = '<svg width="'+canvas_width+'" height="'+canvas_height+'">';
if (test == 'on') {
  innerHTML += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-width="3"></line>'
};

innerHTML +=  '<rect width="'+svg_width+'" height="'+svg_height+'" x="100" y="140" fill="#CCC"></rect>'
  + '</svg>';
  
document.getElementById('diagram1').innerHTML;

【讨论】：