Меню Закрыть

Javascript изменить текст элемента

Учитывая HTML-документ и задача состоит в том, чтобы изменить текст элемента span. Есть два свойства, используемые для изменения содержимого.

    HTML DOM textContent Property: это свойство устанавливает / возвращает текстовое содержимое определенного узла и всех его потомков. Устанавливая свойство textContent, дочерние узлы удаляются и заменяются одним текстовым узлом с указанной строкой.

Синтаксис:

    Вернуть текстовое содержимое узла:

Установите текстовое содержимое узла:

Значения свойства: содержит текст с одним значением, который определяет текстовое содержимое указанного узла.

Возвращаемое значение: возвращает строку, представляющую текст узла и всех его потомков. Он возвращает ноль, если элемент является документом, типом документа или нотацией.
HTML DOM innerText Свойство: Это свойство устанавливает / возвращает текстовое содержимое определенного узла и всех его потомков. При установке свойства innerText все дочерние узлы удаляются и заменяются одним текстовым узлом с указанной строкой.

Синтаксис:

    Вернуть текстовое содержимое узла:

Установите текстовое содержимое узла:

Значения свойства: содержит текст с одним значением, который определяет текстовое содержимое указанного узла.

Возвращаемое значение: возвращает строку, представляющую «визуализированное» текстовое содержимое узла и всех его потомков.

Пример 1. Этот пример изменяет содержимое с помощью свойства textContent .

HTML DOM позволяет JavaScript изменять содержимое элементов HTML.

Изменение выходного потока HTML

JavaScript может создавать динамическое HTML-содержимое:

В JavaScript документ. Write () можно использовать для записи непосредственно в выходной поток HTML:

Если у меня есть промежуток, скажите:

Как использовать JavaScript для изменения " hereismytext "на"newtext"?

10 ответов

редактировать Для современных браузеров :

используя innerHTML is ТАК НЕ РЕКОМЕНДУЕТСЯ. Вместо этого следует создать textNode. Таким образом, вы" привязываете " свой текст, и вы не уязвимы, по крайней мере, в этом случае, для атаки XSS.

Читайте также:  Рисунки рук для срисовки красивые карандашом

дополнительные сведения об этой уязвимости: межсайтовые Скрипты (XSS) — OWASP

отредактировано 4 ноября 2017:

доработанная третья строка кода согласно @mumush предложение: "используйте appendChild (); вместо".
Кстати, согласно @Jimbo Jonny я думаю, что все должно рассматриваться как пользовательский ввод, применяя принцип безопасности по слоям. Таким образом, вы не встретите никаких сюрпризов.

EDIT: это было написано в 2014 году. Вы, вероятно, больше не заботитесь о IE8 и можете забыть об использовании innerText . Просто используйте

Я использую Jquery и ничего из вышеперечисленного помогло, я не знаю, почему, но это работает:

вот еще один способ:

свойство innerText будет обнаружено Safari, Google Chrome и MSIE. Для Firefox стандартным способом было использовать textContent, но с версии 45 у него тоже есть свойство innerText, как кто-то любезно сообщил мне недавно. Это решение проверяет, поддерживает ли браузер одно из этих свойств, и если да, назначает "newtext".

Как и в другом ответе,innerHTML и через свойство innerText не рекомендуется, лучше использовать textContent. Этот атрибут хорошо поддерживается, вы можете проверить это: http://caniuse.com/#search=textContent

это выберет dom-узел с id myspan и измените его текстовое содержимое на new text

в дополнение к чистым ответам javascript выше, вы можете использовать jQuery текст метод следующим образом:

Если вам нужно расширить ответ, чтобы получить/изменить HTML-код содержимое span или div-элементов, вы можете сделать это:

Рекомендуем к прочтению

Добавить комментарий

Ваш адрес email не будет опубликован.