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

Question

我正在使用 java-脚本在我的 html/php 页面上使用 innerHTML 属性.

呈现基于 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>';

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

您可以在将其设置为 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>';

Answer 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;

Answer 5

您必须将它存储在一个变量中，然后将其添加到您的 if-clause 中，然后再添加其他变量。你没有将 innerHTML 正确地构建在一起，如果和后面的所有部分都被遗漏了，所以你会遇到这些丢失部分的麻烦。

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;

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

How to include an if statement within the javascript of a multiple line innerHTML property?

javascript

svg

if-statement

innerhtml

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

How to include an if statement within the javascript of a multiple line innerHTML property?

javascript

svg

if-statement

innerhtml

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