如何将 js 数组打印到 html 中的 div 中？ [关闭]

Posted 2023-05-09

【中文标题】如何将 js 数组打印到 html 中的 div 中？ [关闭]

【英文标题】：How can I print a js array into a div in html? [closed]

【发布时间】：2020-08-07 10:45:20

【问题描述】：

为什么我无法将推入数组的元素显示到 html div 中。我只是想打印 hello 这个词 3 次，但它不起作用。当我将数组打印到控制台时，数组确实显示了 3 个 Hello。

$(function() 
  var $buttonsArray = [];
  var $buttondiv = $('#btndiv');

  for (var i = 0; i < 3; i++) 
    var $button = "hello";
    $buttonsArray.push($button);
  

  for (var j = 0; j < $buttonsArray.length; j++) 
    $buttondiv.append($buttonsArray[j]);
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btndiv"></div>

【问题讨论】：

$button 是String

你正在追加整个数组，要么追加当前项 ($buttonsArray[j]) 要么摆脱第二个循环，它应该转换为字符串就好了。

感谢您的回答。我实际上确实有 ($buttonsArray[j])，在我的代码中，但它仍然不起作用。我删除了第二个循环，但仍然没有成功。还有其他想法吗？如果 $button 是一个字符串，会有问题吗？

把你的代码变成了可运行的sn-p，我刚刚添加了div和jQuery，正如你所见，它工作得很好。

我明白了，是的，在这里工作正常。我要检查我的 jquery 链接，看看那里是否有问题。非常感谢您的宝贵时间！！

【参考方案1】：

HTML 主要是文本（或称它为字符串），而 javascript 变量可以是字符串、数字、对象、数组。

默认情况下，在所有这些 javascript 类型中，如果您只是将它们放入 DOM 元素中，浏览器会尝试将它们转换为字符串。

const someNumber = 1
const someString = 'hello'
const someObject = answer:42
const someArray = [1, 'help', 3, a:2]

document.write(someNumber + '<br/ >')
document.write(someString + '<br/ >')
document.write(someObject + '<br/ >')
document.write(someArray + '<br/ >')

// is the same as 
document.write(someNumber.toString() + '<br/ >')
document.write(someString.toString() + '<br/ >')
document.write(someObject.toString() + '<br/ >')
document.write(someArray.toString() + '<br/ >')

当你处理一个数组时，你可以使用.join重新组合它们

例如

const greets = ['allo', 'hello', 'holla'];

function render()   
  // This write the list separated with comas using join
  document.getElementById('app').innerHTML = greets.join(', ');
  
  // This works too but can be slow and doesn't not allow much flexibility
  document.getElementById('debug').innerHTML = JSON.stringify(greets);


render();

setTimeout(() => 
  greets.push('oi');
  render();
, 1000)

<div id="app"></div>
<pre id="debug"></pre>

【讨论】：

请不要在示例中推荐甚至显示document.write 的使用。见Why is document.write considered a “bad practice”?

这很有帮助。喜欢你解释浏览器如何处理数组的方式，谢谢你的信息。

对不起Heretic，这是为了写一个小例子，我们可以通过 someElement.innerHTML = someNumber + '' + someString + ' ' + ... 等