innerHtml 前置文本而不是附加答案

【问题标题】：innerHtml prepend text instead of appendinginnerHtml 前置文本而不是附加
【发布时间】：2014-04-11 05:37:51
【问题描述】：

我有一个函数可以用几行基本的 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>

【问题讨论】：

标签： javascript html function innerhtml charat

【解决方案1】：

使用.insertAdjacentHTML 而不是.innerHTML。

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

可用的四个职位是：

"beforebegin"（直接在当前节点之前）
"afterbegin"（在当前节点内，开头）
"beforeend"（在当前节点内，在末尾）
"afterend"（直接在当前节点之后）

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

【讨论】：

好的，但是它颠倒了文本的顺序，我怎样才能保持顺序？
@vlad：如果文本应该放在endingEl 元素之前，则选择那个，并使用"beforebegin"。 jsfiddle.net/p49Sg

【解决方案2】：

cookie monster 解决了这个问题（两年多前），但我只是想分享一个我发现的有用链接以及另一个示例和一个漂亮的可视化。 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

编辑：如果该链接变得无用，这里是来自 MDN 的我认为有用的相关信息：

总结

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML，并将生成的节点插入到 DOM 树的指定位置。它不会重新解析正在使用的元素，因此不会破坏元素内的现有元素。这一点，并且避免了额外的序列化步骤，使它比直接的 innerHTML 操作要快得多。

语法

element.insertAdjacentHTML(position, text);

position是相对于元素的位置，必须是以下字符串之一：

'开始之前' 在元素本身之前。

'之后' 就在元素内部，在它的第一个子元素之前。

'结束前' 就在元素内部，在其最后一个子元素之后。

'事后' 在元素本身之后。

text 是要解析为 HTML 或 XML 并插入到树中的字符串。

职位名称的可视化

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注意：beforebegin 和 afterend 位置仅在节点在树中并且有一个父元素。

示例

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

【讨论】：