Если innerHTML - это зло, то как лучше изменить текст ссылки?

Question

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

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

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

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

А в Prototype / jQuery:

$("mylink").innerHTML = new_text;

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

Answer 1

Как насчет

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

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

Что касается комментария Триптиха и ответа Бобинса, вот другое решение:

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

Answer 2

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

Answer 3

Для браузеров, поддерживающих 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));
    }
}

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Просто используйте это. Это работает как шарм.

Answer 7

Другой вариант - использовать два элемента div и использовать .hide () & .show ().