在 html 中创建 javascript 循环答案

【问题标题】：Creating javascript loop in html在 html 中创建 javascript 循环
【发布时间】：2023-03-24 21:44:01
【问题描述】：

我想在 html 中创建一个 javascript 循环，如下所示：

( if (var i=0; i<10; i++) { )  //<-- JAVASCRIPT

//HTML

( } ) //<-- JAVASCRIPT

我尝试使用<% JAVASCRIPT %>，但它对我不起作用。有谁知道谁来解决这个问题？

提前致谢。

【问题讨论】：

我很确定你不能用 javascript 做到这一点。
看看一些模板引擎，看看if做了什么......

标签： javascript html loops for-loop

【解决方案1】：

这不是 javascript 的工作方式。这是你会用 PHP 做的事情。

使用 javascript，您可以将其与 html 分开运行。然后，您在 html 中创建一个元素作为包装器，以将 javascript 生成的 html 放入其中。像这样：

HTML

<div id="myHTMLWrapper">

</div>

<script>
  var wrapper = document.getElementById("myHTMLWrapper");

  var myHTML = '<span class="test">Testing out my script!</span>';

  wrapper.innerHTML = myHTML
</script>

查看工作示例here

抱歉，我顺便跳过了for 循环。让我用这个更新来修复它......你可以这样做，你看：

<script>
  var wrapper = document.getElementById("myHTMLWrapper");

  var myHTML = '';

  for (var i = 0; i < 10; i++) {
    myHTML += '<span class="test">Testing out my script! loop #' + (i + 1) + '</span><br/><br/>';
  }

  wrapper.innerHTML = myHTML

</script>

【讨论】：

【解决方案2】：

<script>
    for(var i=0; i<10; i++) {
    //Code here
    }
</script>

https://www.w3schools.com/js/js_if_else.asp

https://www.w3schools.com/js/js_loop_for.asp

我建议您在直接开始编码之前先阅读一下无论哪种方式，您的脚本似乎都有缺陷，我无法弄清楚您想用它做什么。

如果您想附加元素，请检查这些链接： https://www.w3schools.com/jquery/html_append.asp

https://www.w3schools.com/jsref/met_node_appendchild.asp

【讨论】：

这似乎不是 OP 要求的，也不会帮助他。他显然认为您可以破坏脚本以呈现 HTML，就像使用 razor 脚本或 PHP 一样......
哦，对不起，我正在更新我的答案。

【解决方案3】：

for 循环是控制流，因此不能插入到静态上下文中。尝试映射它，例如

`<html>` + data.map(function(a) { return `<div>${a}</div>` }).join('') + `</html>`

【讨论】：