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

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

我正在使用Java脚本使用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>';

是否有其他/更好的方法来做到这一点？我想念什么吗？

解决方法

您可以使用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>';

,

您可以使用template literals做同样的事情。因此，如果您有任何条件，可以将其作为-

包含在HTML中

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

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

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

,

您可以先将字符串设置为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>';

,

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; 

,

您必须将其存储在变量中，并将其添加到if子句中，然后再添加到其余部分。您没有将内部HTML适当地构建在一起，以防万一，如果错过了后面的所有部分，那么您会为这些丢失的部分感到麻烦。

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;