18

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

2 回答 2

36

使用.insertAdjacentHTML而不是.innerHTML.

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

可用的四个职位是：

  • "beforebegin" （直接在当前节点之前）

  • "afterbegin" （在当前节点内，在开头）

  • "beforeend" （在当前节点内，最后）

  • "afterend" （直接在当前节点之后）

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

于 2014-03-07T21:19:02.630 回答
5

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>
于 2016-09-21T21:09:54.270 回答