如何根据来自 javascript 函数的值呈现 Div 内容

Question

我有一个场景，div 的内容将根据 java-script 函数返回的值显示

伪 HTML：

<div>
if(true==myfunction())
{
<p>True is returned from the javascript function</p>
}
else
{
<p>False is returned from the javascript function</p>
}
</div>

伪javascript函数

myFunction()
{
var x = false;

// Some code to decide value of x.

return x;
}

我使用的是 Asp.net 核心，我的 Javacript 代码存在于 site.js 中，html 代码存在于 cshtml 中。

如果有人可以就如何实现这一目标提出建议，那将非常有帮助。 注意：呈现的代码不是实际代码，而是代表实际场景。

Answer 1

这可以是一种方法

const par = document.createElement('p');
par.innerHTML = `${x ? 'True' : 'False'} is rendered from javascript function`;

document.getElementById('idx').appendChild(par);

你需要给你的 div 标签一个 id html<div id="idx"></div>

Answer 2

有很多不同的方法可以做到这一点。这实际上取决于您的代码以及您将在何时以及如何设置这些值。

下面的简单示例通过按钮单击起作用。您的问题中没有足够的信息来判断这是否是您的最佳选择。

建议使用真实代码更新您的问题，以便获得更接近您真正需要的答案。请包括您收到的任何错误消息。

function myFunction() {
  var spn = document.getElementById("jsValue");
  var val = (this.value == "1") ? "True" : "False";
  spn.textContent = val;
}

window.onload = function() {
  var b = document.querySelectorAll("button");
  var i, max = b.length;
  for(i=0;i<max;i++) {
    b[i].addEventListener("click",myFunction,false);
  }
}

<p><span id="jsValue">unknown</span> is returned from the javascript function</p>
<p><button value="1">Set true</button> <button value="0">Set false</button></p>

Answer 3

您可以创建一个新的 DOM 节点，然后将其附加到带有条件或其他内容的主体中。

<div id="div1"></div>

<script>
  function myFunction(x) {
    var para = document.createElement("p");
    if (x === true) {
      var node = document.createTextNode(
        "True is returned from the javascript function."
      );
      para.appendChild(node);
    } else {
      var node = document.createTextNode(
        "False is returned from the javascript function."
      );
      para.appendChild(node);
    }
    var element = document.getElementById("div1");
    element.appendChild(para);
  }

  myFunction(true);
</script>

更多信息：https://www.w3schools.com/js/js_htmldom_nodes.asp