Js вывод текста

Добавить текст в JavaScript

Как добавить новый текст к уже существующему, не удаляя текущий?

p.innerHTML += ‘ <i>на сайте</i>’;

Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.

Эти две записи равнозначны.

p.innerHTML = p.innerHTML + ‘на сайте’;

Берем, что имеется, прибавляем что-нибудь новое и записываем заново.

Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами <i>, а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.

p.innerHTML += ‘ <i>на сайте</i>’;

Теги выводятся, но не обрабатываются.

p.innerText += ‘ <b>на сайте</b>’;

Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.

p.insertAdjacentHTML(‘beforeBegin’,’на сайте’);

Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:

  • первый параметр – где вывести информацию
  • второй параметр – это что вывести

Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.

  • beforeBegin — перед открывающим тегом
  • afterBegin — после открывающего тега
  • beforeEnd – перед закрывающим тегом
  • afterEnd – после закрывающим тегом

Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.

Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *