Если innerHTML - это зло, то как лучше изменить текст ссылки?
Я знаю, что innerHTML якобы злой, но я думаю, что это самый простой способ изменить текст ссылки. Например:
<a id = "mylink" href = "">click me</a>
В JS вы можете изменить текст с помощью:
document.getElementById("mylink").innerHTML = new_text;
И в Prototype / jQuery:
$("mylink").innerHTML = new_text;
работает отлично. В противном случае вам нужно сначала заменить все дочерние узлы, а затем добавить текстовый узел. Зачем беспокоиться?
в jQuery вы можете использовать функцию html для установки его innerHtml: $ ("# mylink"). html ('new html');
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
innerHTML имеет побочные эффекты (например, отключение существующих узлов DOM и повторная отрисовка, которая может быть сложной). Об этих эффектах нужно знать. И любой, кто поддерживает код, должен быть предупрежден об использовании innerHTML, иначе они могут столкнуться со странными ошибками.
Тем не менее, в большинстве случаев innerHTML обычно намного быстрее, чем использование DOM.
Ракеты @rob Continental намного быстрее, чем 747, только в них нет последовательности приземления для пассажиров, так что вы бы хотели поехать на ней?
innerHTML - это совсем не зло. Нет ничего плохого в его использовании, если вы знаете о последствиях.
да, вроде багов в IE ;-)
Возможно, это просто некоторые стандартные наркоманы, которые отвергают идею innerHTML.
innerHTML - это практический стандарт, потому что его реализуют все браузеры, хотя он не является стандартом W3C.
Просто используйте это. Работает как часы.
"стандартный наркоман"? =) У стандартов есть свое применение. Как поощрение общей реализации. innerHTML присутствует в большинстве браузеров, но работает по-другому. Я бы сказал, используйте его с осторожностью.
<layer> тоже когда-то были «практическим стандартом».
<bite> меня </bite>! @PEZ Все наркоманы считают свою пристрастие чем-то полезным. @Trip ... что угодно Разве эта игрушка не предназначена только для netscape?
Еще год назад innerHTML был намного быстрее, чем управление событиями через DOM. Я сам не проверял последние версии всех основных браузеров.
Например, Firefox не справляется с этим. Иногда он только обновляет экран, чтобы отразить изменение. Если вы запросите DOM после изменения, он все еще будет иметь старые значения.
Пример: попробуйте изменить значение текстового поля через innerHTML, а затем опубликуйте форму. Он будет молча опубликовать значение, которое ранее было у текстового поля. Подумайте о катастрофических результатах, которые могло бы иметь что-то подобное.
@Wouter: Textarea - это поле ввода, и его значение следует изменить с помощью element.value
Я знаю, что вы тоже можете это изменить. Если вы используете innerHTML, он автоматически принимается, но не работает так, как вы ожидаете.
«Поскольку для этого свойства нет общедоступной спецификации, реализации сильно различаются. Например, когда текст вводится во ввод текста, IE изменяет атрибут value свойства input innerHTML, а браузеры Gecko - нет». (продолжение)
Какой HTML должен быть внутри ТЕКСТАРА?
В TextArea не должно быть HTML, но у innerText та же проблема, и наверняка текст должен быть в текстовом поле, верно? Проблема в том, что браузеры позволяют вам устанавливать свойство. FireFox обновляет значение в виджете (так что ВЫГЛЯДИТ так, как будто он работает), но не DOM. IE обновляет оба.
Другой вариант - иметь два div и использовать .hide () и .show ().
Как насчет
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);
Это также не сработает, если ссылка содержит внутренний элемент <span>.
Да, и если бы вопрос не был «как лучше [изменить] текст ссылки», возможно, вы были правы ...
В качестве обобщенной версии, если в элементе a может быть другое содержимое, очистите содержимое и добавьте новый текстовый узел. например: while (link.firstChild) link.removeChild (link.firstChild); link.appendChild (document.createTextNode ('Новый текст'));
10 лет спустя, в 2018 году нет причин не использовать стандарт DOM textContent: document.getElementById('some-id').textContent = 'hello'
Для браузеров, поддерживающих 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)
Немного важной информации developer.mozilla.org/En/DOM:element.innerHTML