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

Posted 2023-02-22

【中文标题】如何根据来自 javascript 函数的值呈现 Div 内容

【英文标题】：How to render Div Content based on value from javascript function

【发布时间】：2020-02-28 19:56:25

【问题描述】：

我有一个场景，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 中。

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

【问题讨论】：

您使用的是剃刀视图吗？

【参考方案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>

【参考方案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>

【参考方案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

【讨论】：

这几乎就是我一直在寻找的解决方案。非常感谢您的及时回复。

@RishabhNigam 很高兴我能帮上忙。您可以选择此答案作为已接受;)