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));

利用可能な 4 つのポジションは次のとおりです。

  • "beforebegin" (現在のノードの直前)

  • "afterbegin" (現在のノード内、先頭)

  • "beforeend" (現在のノード内、最後)

  • "afterend" (現在のノードの直後)

.innerHTML += "..."タイプのソリューションの使用は絶対に避けてください。これは非常に破壊的で費用のかかるアプローチです。

于 2014-03-07T21:19:02.630 に答える
5

cookie Monster はこれを (2 年以上前に) 成功させましたが、私が見つけた役立つリンクを別の例と素晴らしい視覚化で共有したかっただけです。 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' 要素自体の後。

textHTML または 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 に答える