使用 vanilla javascript 单击按钮时在 div 元素上显示数组项答案

【问题标题】：Display array items on a div element on click of button using vanilla javascript使用 vanilla javascript 单击按钮时在 div 元素上显示数组项
【发布时间】：2020-05-29 22:16:35
【问题描述】：

谁能告诉我如何在 div 元素上打印元素数组

var myArray=["stone","paper","scissors"]


<button onclick="printnumbers()"></button>
<div id="result">

</div>

【问题讨论】：

标签： javascript html arrays dom

【解决方案1】：

var myArray = ["stone", "paper", "scissors"]
function printnumbers() {
  document.querySelector('#result').textContent = myArray.join(', ');
}

<button onclick="printnumbers()">Print Numbers</button>
<div id="result"></div>

【讨论】：

【解决方案2】：

使用.toString() 方法。

function printnumbers(){
var myArray=["stone","paper","scissors"]
var display = myArray.toString();
document.getElementById("result").innerHTML = display;
}

<button onclick="printnumbers()">Display</button>
<div id="result"></div>

【讨论】：

【解决方案3】：

只需对数组 myArray 执行 forEach 并在 div 中附加文本。

var myArray=["stone","paper","scissors"]
function printnumbers(){
   myArray.forEach(function(el){
     document.getElementById('result').innerHTML+='<br>' +el;
   })
}
// alternative way , suited for your use case.
//var arrayContents = myArray.toString();
//document.getElementById('result').innerHTML = arrayContents;

<button onclick="printnumbers()" >click me</button>
<div id="result">

</div>

toString() 方法返回一个包含所有数组值的字符串，用逗号分隔，您也可以使用此方法。

【讨论】：

【解决方案4】：

var myArray=["stone","paper","scissors"]

printNumbers = () => {
   document.getElementById('result').innerHTML = myArray.join(' ');
}

【讨论】：

【解决方案5】：

仅使用 Vanilla.js，这应该会对您有所帮助 :)

const myArray = ["stone", "paper", "scissors"];

const el = document.getElementById('myButton');

el.addEventListener('click', function() {
  const div = document.getElementById("result");
  myArray.forEach((currentValue, index, array) => {
    let text = index == (array.length - 1) ? `${currentValue}` : `${currentValue}, `;
    let content = document.createTextNode(text);
    div.appendChild(content)
  });
}, false);

#result{
  width: 20rem;
  height: 1rem;
  margin-top: 2rem;
  border-width:3px;
  border-style:dashed;
  border-color:#FFAC55;
  padding: 15px 20px;
}

<!DOCTYPE html>
<html>

<body>

    <button id="myButton">Try it</button>
    <div id="result"></div>

</body>

</html>

【讨论】：