设置一个 JS 变量并在 html 标签中使用它答案

【问题标题】：Setting a JS variable and using it in html tag设置一个 JS 变量并在 html 标签中使用它
【发布时间】：2012-11-28 04:49:35
【问题描述】：

我已经设置了一个变量，我需要把这个变量拉入一个html元素，但是我不能让它打印出值，这是代码：

<script>
    var randomnumber=Math.floor(Math.random()*11)
</script>

<div id="<script type="text/javascript">document.write(randomnumber)</script>"></div>

谢谢。

编辑：我只是以 div 为例，但我需要向 img 标签添加一个随机数，因为它用于跟踪标签，并且需要一个唯一标识符。有没有更好的方法来解决这个问题？

【问题讨论】：

这是干什么用的？为什么要为元素分配随机 ID？（顺便说一句，纯数字 ID 在 HTML 4 中无效）
只需通过 javascript 本身注入 div。顺便说一句，在 html4 中你不应该有前导数字 id
而且我什至不确定您是否可以将脚本标签放在属性中...
document.write? 2012年底？

标签： javascript html variables var

【解决方案1】：

使用

<script>
document.write('<div id="'+randomnumber+'" ></div>');
</script>

你不能在属性中打开脚本标签

【讨论】：

document.write() 的问题是它不会在</body> 之前执行。如果我之前需要执行 javascript 怎么办？
@ArturGrigio 我不确定你在说什么。它确实在</body> 之前执行，它在页面上的确切位置执行。所以如果你把它放在它依赖的一些 HTML 之前，它会因为找不到节点而中断（因为它还没有被解析）
假设我在页面开始渲染时有document.write('<img src="img.jpg">')，JS只是将<img src="img.jpg">写为纯文本，直到它到达</body>，然后渲染为图像。
@ArturGrigio 不，这是不正确的，图像立即开始加载。您可以通过分析网络来测试它，如果图像被缓存，它会立即显示（在单独的脚本标签上添加断点）。一旦脚本标签关闭，document.write 生成的 HTML 会立即被浏览器解析。

【解决方案2】：

或者你可以使用JS创建它：

var randomnumber=Math.floor(Math.random()*11);
a = document.createElement('div');
a.setAttribute('id',randomnumber);
document.body.appendChild(a);

// if you know the exact class or ID where it is to be appended you can use

document.getElementsByClassName("myclass")[0].insertBefore(a, document.getElementsByClassName("beforeClass").firstChild);

这将创建一个div，将id 作为randomnumber，并将其附加到body

【讨论】：

我认为您不能在这里使用appendChild，因为 OP 似乎希望将 div 准确地放置在此代码所在的位置。您的代码会将 div 附加到正文的末尾，这可能是不需要的。
如果你知道具体的位置，你可以找到特定的类或 div，你需要在哪里追加它
@Ian 调用 document.body.appendChild(a); 将其添加为此时的最后一个元素，就像 document.write 一样
@JuanMendes 我刚刚说过。
@Ian 你说这将是正文中的最后一件事，只有在 script 标签后没有 HTML 时才如此。 jsfiddle.net/WqbY7