如何将 JS 函数打印成 HTML？

Question

我有一个函数可以显示对象中重复的字母。我想在单击按钮时在 HTML 文件中显示 {J: 1, O: 1, N: 2, A: 1}。

Javascript:

let button = document.getElementById("button");
button.addEventListener("click", (event) => {
   countLetters();
});
function countLetters() {
   let name = ["J", "O", "N", "N", "A"];
   let newObj = {};
   name.map(function (letters) {
   newObj[letters] = (newObj[letters] || 0) + 1;
   });
}

HTML:

<html>
  <body>
   <button id="button">Click me</button>
   <script src="/script.js"></script>
  </body>
</html>

Answer 1

在您的 HTML 中创建 div 或 paragraph，并将 id 属性设置为 divID。然后通过以下方式访问：

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

Answer 2

您可以通过

创建div元素

document.createElement("div");

然后你可以通过

创建一个你的对象作为字符串的textNode

document.createTextNode(JSON.stringify(newObj));

将文本节点附加到新创建的 div 元素，然后将 div 元素附加到文档正文。

div.appendChild(textN);
document.body.appendChild(div);

let button = document.getElementById("button");
button.addEventListener("click", (event) => {
  countLetters();
});

function countLetters() {
  let name = ["J", "O", "N", "N", "A"];
  let newObj = {};
  name.map(function(letters) {
    newObj[letters] = (newObj[letters] || 0) + 1;
  });
  const div = document.createElement("div");
  const textN = document.createTextNode(JSON.stringify(newObj));
  div.appendChild(textN);
  document.body.appendChild(div);

}

<html>

<body>
  <button id="button">Click me</button>
  <script src="/script.js"></script>
</body>

</html>

如何将 JS 函数打印成 HTML？

How to print a JS function into HTML?

html

javascript

function

dom-events