是否可以将js变量写入纯html？答案

【问题标题】：Is it possible to write a js variable into plain html?是否可以将js变量写入纯html？
【发布时间】：2017-09-21 12:45:29
【问题描述】：

我正在计算我的用户指定和动态出现的 div...

我的情况：

<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
<div id="streamcontainer1" class="streamcontainer grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">

</div>
</div>

在 PHP 中，我可以简单地将我的 COUNT 变量写入 html 中。看起来像这样：

<div id="streamcontainer<?php echo $count ?>" class="" ... and so on...>

如何使用 JS/Jquery 进行归档？

【问题讨论】：

PHP 和 JavaScript 做了两件非常不同的事情。 PHP 生成 HTML 输出（如您所演示的）。 JavaScript 使用生成的 HTML 输出（可能涉及以某种方式对其进行修改）。你想用 JavaScript 实现什么？ JavaScript 将使用的 HTML 是什么，你想用它做什么？
你正在使用什么库或框架来读取data-bind？那是knockout.js吗？
我不知道这有什么帮助，但嘿，这是我的背景故事：我正在使用网格堆栈来创建用户仪表板。在该仪表板中，用户可以选择在其中流式传输不同的内容，例如 youtube 视频或简单的 facebook 提要。 Gridstack 有一个模板 div（就像一个蓝图），每次用户想要一个新的时都会调用它。我需要给这些东西编号。所以我想做的是计算所有现有的数字并将该数字 +1 添加到新的数字。
@charlieetfl 是的！
将该标签添加到问题中，并详细说明您需要完成的工作

标签： javascript php jquery variables dynamic

【解决方案1】：

这是一个 DOM 操作问题。我们必须处理什么？我们正在向页面添加 div，它们有一个特定的类，我们想给它们一个 ID。

function assignIds(){
  var list = document.getElementsByClassName('streamcontainer');
  for(var i=0; i<list.length;i++){
    if(list[i].id == undefined) // skip the ones that have already been done.
      list[i].id = 'streamContainer' + i.toString();
  }
}

现在我们只需要在某个事件上运行该函数，它就会不断更新。如果您只是想在间隔内执行此操作，那是最简单的。 (setInterval) 但这可能会给您带来一个错误，即有一小段时间该 ID 尚未分配。您可以尝试监听将这些内容流式传输到页面上的任何 AJAX/websocket 进程。

我们需要更多地了解您的用例，才能知道要将其附加到哪个事件。

【讨论】：

这是一个很好的答案，先生！ +1

【解决方案2】：

如果没有 Javascript 响应式框架（Vue.js、React、AngularJS），您将无法做到这一点。用 JS 可以做的是在加载 DOM 时在 element 中设置内容，例如：

document.getElementById("myElement").textContent = "Hello World!";

或者

document.getElementById("myElement").innerHTML = "<span>Hello World!</span>";

OBS：.innerHTML可以插入HTML标签，.textContent只插入文本。

【讨论】：

【解决方案3】：

您可以利用 knockoutjs 中的 text 绑定在 HTML 中显示 javascript 值。有很多 ko 绑定可以帮助你。更多参考here

    var viewModel = {
        javascriptVariable: "I am javascript string"
    };
    ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="text: javascriptVariable"></span>

【讨论】：