Как добавить текст через js в html
Мне нужно в пустой элемент p с классом country вставить текст через js. Такой код почему то не работает:
var elem = document.getElementsByClassName('country'); elem.innerHTML = "USA"; document.body.appendChild(elem); И такой тоже
var elem = document.getElementsByClassName('country'); var textElem = document.createTextNode('USA'); elem.appendChild(textElem); Отслеживать
задан 26 окт 2018 в 23:17
887 1 1 золотой знак 9 9 серебряных знаков 15 15 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Посмотрите тут. Метод getElementsByClassName возвращает как видно из названия (elements — множественное число) array-like объект, а не конкретный элемент DOM.
Как получаем доступ к элементу массива?
var elem = document.getElementsByClassName('country'); elem[0].innerHTML = "USA" Метод document.write
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Метод document.write – один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
Как работает document.write
Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
HTML-документ ниже будет содержать 1 2 3 .
1 3 Нет никаких ограничений на содержимое document.write .
Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
Текст внутри TD.
Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .
Только до конца загрузки
Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.
Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.
Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.
Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:
Из-за этой особенности document.write для загруженных документов не используют.
XHTML и document.write
В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.
Это лишь одна из причин, по которой XML-режим обычно не используют.
Преимущества перед innerHTML
Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.
- Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом. Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
- Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).
Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
Антипример: реклама
Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
На заметку:
Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.
Также используют запись:
document.write('');Здесь вместо : обратный слеш \ обычно используется для вставки спецсимволов типа \n , а если такого спецсимвола нет, в данном случае \/ не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .
Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой document.write , рисующий на этом месте баннер.
Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.
То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.
Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.
В современных браузерах у скриптов есть атрибуты async и defer , которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать document.write именно на этом месте, и браузер не должен двигаться вперёд по документу.
Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.
Итого
Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.
- Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
- Метод document.write очень быстр. В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
- Иногда document.write используют для добавления скриптов с динамическим URL. Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.
Как изменить текст в html через js
Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.
Исходный HTML документ
class="text">Здесь могла быть ваша реклама onClick="changeText();">Нажми чтобы изменить В раздел со скриптами на странице добавим определение функции:
const changeText = () => // Выбираем элемент на странице, и меняем содержимое нужного поля document.getElementsByClassName('text')[0].textContent = "Кто сказал мяу?"; > Вставка текста и html-кода в элементы страницы — Методы innerHTML, textContent и insertAdjacentHTML
Если Вы научились манипулировать положением элементов на странице (см. заметки «Действия с элементами — . «), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?
Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка — это тег div и какое-то оформление — это класс black . Больше ничего этот элемент не содержит.
Здесь мы продолжим работать с тегом div — будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?
Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .
Метод innerHTML — Вставка текста
Метод innerHTML позволяет вставить текст.
Elements - Udemy 'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем в конец body тег div document.body.append(div); // Вставка текста в тег div div.innerHTML = "Hello world";
Результат в Браузере
В тег div добавили текст Hello world .
Метод innerHTML — Вставка HTML-кода
Метод innerHTML позволяет вставить HTML-код.
Продолжим работать с предыдущим примером.
'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка кода div.innerHTML = "Hello world
";
Результат в Браузере
Текст Hello world заключили в заголовок h1 («Hello world» теперь не умещается в область тега div) .
Метод textContent — Вставка текста
Метод textContent позволяет вставить текст.
'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка текста в тег div div.textContent = "textContent";
Результат в Браузере
В отличии от метода innerHTML — метод textContent работает только с текстом .
Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.
Метод insertAdjacentHTML
Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.
Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.
Синтаксис метода insertAdjacentHTML
Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.
опорный элемент.insertAdjacentHTML( «ключевое слово» , «код» );
Метод insertAdjacentHTML принимает два аргумента : первый — это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML — это HTML-код, который мы хотим вставить.
'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем к div стили div.style.cssText = 'width: 250px; height: 110px'; // Добавляем в конец body тег div document.body.append(div); // Вставка HTML-кода в начало и в конец элемента div.insertAdjacentHTML("afterbegin", 'afterbegin - В начало элемента
'); div.insertAdjacentHTML("beforeend", 'beforeend - В конец элемента
'); // Вставка HTML-кода после и перед элементом div.insertAdjacentHTML("afterend", 'afterend - После элемента
'); div.insertAdjacentHTML("beforebegin", 'beforebegin - Перед элементом
');
Результат в Браузере
Результат в консоли
beforebegin - Перед элементом
afterbegin - В начало элемента
beforeend - В конец элемента
afterend - После элемента
Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.