"InnerText" 属性忽略空格

Question

我希望当我按下任何键盘键时，存储在“数组”变量（作为数组）中的字符串被写入“p”元素，但问题是当我放一个空的 space 在“字符串”变量中（通过tab键或space键）它不会写那些空的spaces，所以句子会是这样的：“Helloworld”。

window.onload = () => {
    let log = document.getElementById("log");
}
let string = "  Hello world \n  How are you ?";
let array = string.split("");
let i = 0;
log.addEventListener("click", () => {
    document.addEventListener("keypress", type);
})
function type() {
    log.innerText += array[i];
    i++;
    if (array[i] === undefined) {
        document.removeEventListener("keypress", type);
    }
}

#log {
    height: 50vh;
    width: 450px;
    padding: 15px;
    position: absolute;
    left: 10px;
    color: rgb(0, 255, 0);
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
}
#log::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 20px;
    background-color: rgb(0, 255, 0);
    animation-name: green;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes green {
    0% {background-color: rgb(0, 255, 0);}
    25% {background-color: transparent;}
    50% {background-color: rgb(0, 255, 0);}
    75% {background-color: transparent;}
    100% {background-color: rgb(0, 255, 0);}
}

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

Answer 1

不是从 element.innerText 读取，而是将“到目前为止的文本”存储在另一个字符串变量中，并将 innerText 设置为该变量的值。

window.onload = () => {
    let log = document.getElementById("log");
}
let string = "  Hello world \n\tHow are you ?";
let array = string.split("");
let i = 0;
let words = "";
log.addEventListener("click", () => {
    document.addEventListener("keypress", type);
})
function type() {
    words += array[i];
    log.innerText = words;
    i++;
    if (array[i] === undefined) {
        document.removeEventListener("keypress", type);
    }
}

#log {
    height: 50vh;
    width: 450px;
    padding: 15px;
    position: absolute;
    left: 10px;
    color: rgb(0, 255, 0);
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
}
#log::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 20px;
    background-color: rgb(0, 255, 0);
    animation-name: green;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes green {
    0% {background-color: rgb(0, 255, 0);}
    25% {background-color: transparent;}
    50% {background-color: rgb(0, 255, 0);}
    75% {background-color: transparent;}
    100% {background-color: rgb(0, 255, 0);}
}

<pre id="log"></pre>

"InnerText" 属性忽略空格

The empty spaces are ignored by the "InnerText" property

html

javascript

css

jquery

"InnerText" 属性 忽略空格

The empty spaces are ignored by the "InnerText" property

html

javascript

css

jquery

"InnerText" 属性忽略空格