Альтернатива для innerHTML?

Рекомендуемый способ — это манипуляции с DOM, хотя код может получиться довольно многословным. Например:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World'));
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Сделайте что-то с элементом para, добавьте его в документ и т.д.

ИЗМЕНЕНИЕ

В ответ на ваше изменение, чтобы заменить текущее содержимое, достаточно удалить существующее содержимое, а затем использовать приведённый выше код для заполнения новым содержимым. Например:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for (var i = children.length - 1; i >= 0; i--) {
    someDiv.removeChild(children[i]);
}

Однако, как уже упоминали другие, я бы рекомендовал использовать что-то вроде jQuery, так как не все браузеры полностью поддерживают работу с DOM, и даже те, которые поддерживают, имеют свои особенности, с которыми справляются внутренние библиотеки JavaScript. Например, с jQuery это будет выглядеть так:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

Вы можете добиться того же эффекта, манипулируя DOM. Самый безопасный способ изменить текст — удалить все дочерние узлы элемента и заменить их новым текстовым узлом.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

Удаление дочерних узлов избавляет от текстового содержимого вашего элемента перед тем, как заменить его новым текстом.

Причина, по которой большинство разработчиков избегают использования innerHTML, заключается в том, что работа с элементами через DOM соответствует стандартам.

Чтобы обойти проблему с element.innerHTML, я нашел довольно интересное решение. Оно позволяет легко добавлять HTML-код, не используя innerHTML. Вот пример:

HTMLElement.prototype.htmlContent = function(html) {
    var dom = new DOMParser().parseFromString('<template>' + html + '</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

// Использование: document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

Существует еще один вариант без использования тегов <template>, но с циклом:

HTMLElement.prototype.htmlContent = function(html) {
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

Обратите внимание, что этот метод добавляет содержимое, в то время как innerHTML заменяет его.

Еще один полезный метод для очистки содержимого элемента:

HTMLElement.prototype.clearContent = function() {
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

// Использование: document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

Более подробную информацию можно найти в документации: Github.

Также вы можете проверить производительность различных методов по этой ссылке: JSPerf.

Это довольно старая тема.

На данный момент ситуация изменилась:

element.innerText = "Привет, мир!";

Теперь это однострочный код. С 2016 года все современные браузеры поддерживают данную функциональность.

Если вам нужно просто изменить обычный текст, то есть более быстрый способ, который основан на стандартах:

document.getElementById("one").firstChild.data = "two";

Тем не менее, имейте в виду, что innerHTML будет частью предстоящего стандарта HTML 5.