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 += "..."不惜一切代价使用各种解决方案.这是一种非常具有破坏性和昂贵的方法.

Answer 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是相对于元素的位置，并且必须是以下字符串之一：

'beforebegin' 在元素本身之前。

'afterbegin' 就在元素内部，在其第一个子元素之前。

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

'afterend' 在元素本身之后。

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>