如何使用 javascript 在 html 元素中创建新行

Question

我想在“p”元素中创建一个新行。我也尝试过 br 标签和 \n 标签，但它并没有真正起作用。当我运行代码时，新行显示为行之间的 space。

<p id="log"></p>

let log = document.getElementById("log");
let string = `|line1\n|line2`;
let array1 = string.split("|");
let i = 0;
let x = 0;
log.addEventListener("click", () => {
  document.addEventListener("keypress", type);
})

function type() {
  log.textContent += array1[i].charAt(x);
  x++;
  if (x === array1[i].length) {
    x = 0;
    i++;
  }
  if (array1[i] === undefined) {
    document.removeEventListener("keypress", type);
  }
}

Answer 1

因为您试图在加载之前获取元素 HTML，所以您的代码中的日志变量是 null。

请尝试此代码。

<p id="log>hello</p>

window.onload = function init() {
  const log = document.getElementById("log");
  log.innerText = "\n first \n second";
};

如何使用 javascript 在 html 元素中创建新行

how to create new line in html element by using javascript

html

javascript

newline