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怪物钉了这个（两年多前），但我只想分享一个有用的链接，我发现另一个例子和一个很好的可视化。 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

编辑：如果该链接无效，以下是我发现有用的MDN相关信息：

<强>摘要

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

<强>语法

element.insertAdjacentHTML(position, text);

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

<强>＆＃39; beforebegin＆＃39; 在元素本身之前。

<强>＆＃39; afterbegin＆＃39; 就在元素内部，在它的第一个孩子之前。

<强>＆＃39; beforeend＆＃39; 就在元素里面，在它的最后一个孩子之后。

<强>＆＃39; afterend＆＃39; 元素本身之后。

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>

innerHtml前置文本而不是附加

2 个答案: