Question

如何基于javascript布尔显示一些HTML？我目前有一些HTML，在一个范围内显示“一切正常”。我现在需要根据javascript查询的结果显示HTML。

我想要的是（类似于使用服务器代码）

<script>
if (myPreviouslyDefinedVariable == true){
<span>Yes</span>
}
else
{
<span>No</span>
}
</script>

请注意，虽然我正在展示一个简单的SPAN，但实际的代码是一大块HTML。我知道我可以将HTML“转换”为JavaScript但希望避免这种情况，类似于像在MVC.NET中那样呈现部分

Answer 1

你不能将HTML直接嵌入到这样的Javascript中（它只是创建一个Javascript语法错误作为非法Javascript）。 HTML页面不能以这种方式工作。您可以使用document.write()在当前执行点将Javascript插入页面，也可以使用其他DOM操作方法从脚本中修改当前页面。

例如，你可以这样做：

<script>
if (myPreviouslyDefinedVariable) {
    document.write("<span>Yes</span>");
} else {
    document.write("<span>No</span>");
}
</script>

或者，由于有一些理由要避免document.write()，您可以这样做：

<span id="yesno"></span>

<script>
var text = myPreviouslyDefinedVariable ? "Yes" : "No";
document.getElementById("yesno").innerHTML = text;
</script>

以下是有关您可能希望避免document.write()的原因（可能会降低页面呈现速度）的一些参考：Don't docwrite scripts和Optimizing your pages for speculative parsing。

如果您要在页面中有条件地包含非常大的不同HTML块，则可以使用Ajax调用从单独的模板文件中动态加载和插入内容以检索它，或者您可以包含所有可能的HTML母页中的页面然后隐藏/显示相关块。这些技术中的每一种都有其优点和缺点，这取决于具体情况。

Answer 2

这是在CSS样式display: none和display: inline-block之间切换的绝佳机会：

<强> CSS

.yes, .no {
display: none;
}

<强> HTML

<span class="yes">Yes</span>
<span class="no">No</span>

<强>使用Javascript：

var yesSpan = document.getElementsByClassName('yes')[0];
var noSpan = document.getElementsByClassName('no')[0];

if (myPreviouslyDefinedVariable == true) {
yesSpan.style.display = 'inline-block';
}

else {
noSpan.style.display = 'inline-block';
}

Answer 3

你无法做你想做的事。 Html无法嵌入到javascript中。

但您仍然可以使用

加载模板并在div中显示

Jquery load()

$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
   // callback 
}

将模板保存在文本文件中，然后使用jquery .load（）将它们加载到所需的div中，如上例所示。

Answer 4

通常你会使用一些模板引擎来插入HTML和JS，doT.js是一个轻量级和效率导向的，尽管所有现代和/或大型现代框架都有自己的（甚至是lodash / underscore）来一个）。

如果你使用的是ES2015（你应该是！），你可以使用新的string interpolation feature。

另一种选择，我从未使用但可能适合你，是HTML template tag

Answer 5

我绝对不是专家，但我会在我的HTML文件中放置一个空的范围，然后使用类似的东西：

if ( existingVar ) {
    document.getElementById("SpanID").innerHTML = "Yes";
}

如果javascript bool为true，则显示HTML

5 个答案: