innerHtml prepend text instead of appending

javascript html function innerhtml charat
vlad picture vlad · Mar 7, 2014 · Viewed 7.5k times · Source

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>

Answer

cookie monster picture cookie monster · Mar 7, 2014

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.

Related questions

Fire a function when innerHTML of element changes?

I want to fire a function when the innerHTML of a div element changes. Been testing with element.addEventListener('DOMCharacterDataModified', myFunction()); but it does not seem to work properly. It fires once when the page is loaded but never again …

Read More
anchor jumping by using javascript

I have a question that will be found very often. The problem is that nowhere can be found an explicit solution. I have two problems regarding anchors. The main goal should be to get a nice clean url without any …

Read More
Make function wait until element exists

I'm trying to add a canvas over another canvas – how can I make this function wait to start until the first canvas is created? function PaintObject(brush) { this.started = false; // get handle of the main canvas, as a DOM object, …

Read More