Если innerHTML является злым, то какой лучший способ изменить текст ссылки?

Я знаю, что innerHTML якобы злой, но я думаю, что это самый простой способ изменить текст ссылки. Например:

<a id="mylink" href="">click me</a>

В JS вы можете изменить текст:

document.getElementById("mylink").innerHTML = new_text;

И в Prototype/jQuery:

$("mylink").innerHTML = new_text;

работает отлично. В противном случае сначала необходимо заменить все дочерние узлы, а затем добавить текст node. Зачем беспокоиться?

Ответ 1

Как насчет

document.getElementById('mylink').firstChild.nodeValue = new_text;

Это не будет страдать от проблем, описанных в PEZ.

Относительно комментария Triptych и ответа bobince, здесь другое решение:

var oldLink = document.getElementById('mylink'),
    newLink = oldLink.cloneNode(false);
newLink.appendChild(document.createTextNode(new_text));
oldLink.parentNode.replaceChild(newLink, oldLink);

Ответ 2

innerHTML вовсе не зло. Нет ничего плохого в использовании этого, если вы знаете о последствиях.

Ответ 3

innerHTML имеет побочные эффекты (например, отсоединение существующих узлов DOM и реиндеринг, которые могут быть тяжелыми). Нужно знать об этих эффектах. И кто-нибудь, кто поддерживает код, должен быть предупрежден о том, что используется innerHTML, или они могут запускаться в странные ошибки.

Ответ 4

Может быть, это просто некоторые стандартные наркоманы, которые отвергают идею innerHTML.

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

Просто используйте его. Он работает как шарм.

Ответ 5

До года назад innerHTML был намного быстрее, чем манипулирование событиями через DOM. Я сам не проверял последние версии всех основных браузеров.

Firefox, к примеру, не справляется с этим. Иногда он обновляет экран, чтобы отразить изменение. Если вы запросите DOM после изменения, у него все еще есть старые значения.

Пример: попытайтесь изменить значение текстового поля через innerHTML, а затем опубликуйте форму. Он будет тихо публиковать значение, которое раньше имело текстовое поле. Подумайте о катастрофических результатах, которые могли бы иметь что-то подобное.

Ответ 6

Для браузеров, поддерживающих DOM3, вы можете использовать textContent:

document.getElementById("mylink").textContent = new_text;

Это работает в FF (протестировано в 3), Opera (протестировано в 9.6) и Chrome (проверено в 1), но не в MSIE7 (не тестировалось в MSIE8)

Добавленный пример

Это не очень, но нужно работать с перекрестным браузером (тестируется в win в FF3, Opera9.6, Crome1 и MSIE7)

function replaceTextContent(element,text) {
    if (typeof element ==="string") element = document.getElementById(element);
    if (!element||element.nodeType!==1) return;
    if ("textContent" in element) {
        element.textContent = text; //Standard, DOM3

    } else if ("innerText" in element) {
        element.innerText = text; //Proprietary, Micosoft
    } else {
        //Older standard, even supported by Microsoft
        while (element.childNodes.length) element.removeChild(element.lastChild);
        element.appendChild(document.createTextNode(text));
    }
}

(обновлено: добавлена поддержка встроенного внутреннего содержимого Microsofts)

Ответ 7

Другой вариант состоит в том, чтобы иметь два div и использовать .hide() и .show().