innerHtml prepend text instead of appending

Question

I have a function that emulates typing with few lines of basic JavaScript code, however it appends text, but I want to prepend text to the element before any other already existing text/elements without changing html structure.

How this can be achieved with simplest javascript possible?

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>

Vaporization

Answer 1

Use .insertAdjacentHTML instead of .innerHTML.

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

The four positions available are:

• "beforebegin" (directly before the current node)

• "afterbegin" (inside the current node, at the beginning)

• "beforeend" (inside the current node, at the end)

• "afterend" (directly after the current node)

---

Avoid using .innerHTML += "..." type of solutions at all cost. It's an awfully destructive and expensive approach.

Jurisdiction

Ok, but it reverses the order of text, how can i keep the order? – Vaporization

@vlad: If the text should go before the endingEl element, then select that one instead, and use "beforebegin". jsfiddle.net/p49Sg – Jurisdiction

Answer 2

cookie monster nailed this (over two years ago) but I just wanted to share a helpful link I found with another example and a nice visualization. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

EDIT: Should that link become useless, here is the relevant information from MDN that I found useful:

Summary

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation.

Syntax

element.insertAdjacentHTML(position, text);

position is the position relative to the element, and must be one of the following strings:

'beforebegin' Before the element itself.

'afterbegin' Just inside the element, before its first child.

'beforeend' Just inside the element, after its last child.

'afterend' After the element itself.

text is the string to be parsed as HTML or XML and inserted into the tree.

Visualization of position names

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

Note: The beforebegin and afterend positions work only if the node is in a tree and has an element parent.

Example

// <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>

Bradwell