Javascript 垂直数组答案

【问题标题】：Javascript Vertical ArrayJavascript 垂直数组
【发布时间】：2015-07-01 02:58:31
【问题描述】：

我有一个 javascript 数组，其中每次迭代都会使用推送功能将名称添加到末尾。我将此数组发送到将显示它的 html 文件。当前在所有迭代完成后显示此数组给出：

约翰、史密斯、保罗、多伊

但是，我希望数组垂直显示：

约翰
史密斯
保罗
多伊

在 Javascript 中，是否有某种方法可以指定每个名称作为数组中的新行输入？在 Matlab 中，您可以轻松地指定要将数据存储在数组中的哪一行或哪一列，但我还没有在 Javascript 中找到一种简单的方法。

感谢您为我提供的任何帮助！

更新： Javascript（简体）：

port.onMessage.addListener(function(msg) {
    var Array = []
    var Names = ["John", "Smith", "Paul", "Doe"]
    for (var p = 0; p < Names.length; p++) {
    Array.push(Names[p])
    }
    document.getElementById('status').textContent = Array;
});

HTML（简体）：

<html>
    <head>
    <script src="Javascript.js"></script>
        <style type="text/css" media="screen">
            body { 
                min-width       : 400px;
                min-height      : 300px;
                text-align      : right;
                background-color: #D0D0D0; }
            #status { 
                font-size       : 10px;
                color           : #0000CC;
                text-align      : left;
                font-family     : "Times New Roman", Times, serif; }
        </style>
    </head>
    <body>
    <div id="status"></div>
    </body>
</html>

【问题讨论】：

演示文稿不由 JavaScript 处理。您可以随心所欲地展示您的阵列。这完全取决于输出是什么，例如控制台或网页。
你的意思是像 array[3] = 'John' 吗？
html / dom 显示您的列表，而不是 JS 数组表示。在项目之间添加
标签。
请提供一些代码以便我们提供帮助。
是的，guergana，类似的东西。

标签： javascript html arrays

【解决方案1】：

要尊重 CSS 中的换行符，您可以使用 white-space 属性。首先join 带有换行符的项目：

var array = ['one', 'two', 'three']
element.textContent = array.join('\n')

然后设置合适的CSS：

element {
  white-space: pre
}

var p = document.querySelector('p')

var array = ['one', 'two', 'three']

p.textContent = array.join('\n')

p {
  white-space: pre
}

&lt;p&gt;&lt;/p&gt;

【讨论】：

在 html 文件中，
标签放置在什么位置？在身体里？ p{} 部分是否放置在

【解决方案2】：

尝试使用Array.prototype.forEach 来迭代数组arr，为arr 中的每个项目创建文本节点，将文本节点与“\n”连接到pre 元素。

var arr = ["John", "Smith", "Paul", "Doe"];
var elem = document.getElementsByTagName("pre")[0];
arr.forEach(function(el, i) {
  elem.appendChild(
    document.createTextNode(el + "\n")
  )
})

&lt;pre&gt;&lt;/pre&gt;

【讨论】：

澄清一下，

 标签是否位于 html 文件的正文部分？

@MSTTm “为了澄清一下，
标签是否位于 html 文件的正文部分？”
是的。

所以正文部分应该是这样的：
"所以正文部分应该如下所示：

" 给定 html 在 Question 中，js 在上面的帖子中，尝试 <body> <pre id="status"></pre> </body> 。 css 在 style 元素中为 #status 定义的 css 仍应应用。
非常感谢你们的帮助。但是，我收到一个奇怪的错误：“无法读取未定义的属性 'appendChild'”

【解决方案3】：

var names = ["John", "Smith", "Paul", "Doe"];
document.getElementById('out').innerHTML = names.join('<br>');

&lt;div id="out"&gt;&lt;/id&gt;

【讨论】：