javascript - innerHtml 前置文本而不是追加

Question

我有一个函数可以用几行基本的 JavaScript 代码模拟输入，但是它会附加文本，但我想在不更改 html 结构的情况下将文本添加到任何其他已经存在的文本/元素之前的元素。

如何使用最简单的 javascript 实现这一点？

JavaScript

var el = getElementById('one'), str = 'Abcdefg...'
function type(){
    el.innerHTML += str.charAt(i); i++;
    if(i < str.length){var t = setTimeout(type, 30);}
};type();

HTML

<span id="one">...<span id="endingEl"></span></span>

Answer 1

使用 .insertAdjacentHTML 而不是 .innerHTML。

el.insertAdjacentHTML("afterbegin", str.charAt(i));

可用的四个位置是:

• "beforebegin" (在当前节点之前)

• "afterbegin" (在当前节点内，开始处)

• “beforeend” (在当前节点内，最后)

• "afterend" (紧跟在当前节点之后)

---

不惜一切代价避免使用 .innerHTML += "..." 类型的解决方案。这是一种极具破坏性和昂贵的方法。