Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Добавить тег javascript

javascript как добавить содержимое после другого блока/div/тега пример

Как добавить данные после тега/блока/div с помощью javascript. Добавлять данные можно после любого div/блок/тег, картинки, вообще после всего, если можно обратиться к тегу!

Вчера мы добавляли впереди, сегодня будем добавлять контент после блока, дива, тега и т.д. Чтобы явственно представлять, куда мы будем добавлять сделаем маленькую иллюстрацию, стрелкой укажем, что собственно покажет куда будем добавить данные после тега:

Всё о добавлении тега после другого тега с примерами

  1. Как добавить объект после другого тега -> при загрузке страницы
  2. Добавление тега после другого тега id -> при клике
  3. Добавить любой контент после тега -> обращаемся к тегу
  4. Добавление тега после другого тега class -> при клике
  5. Добавление тега после другого тега name -> при клике
  6. Скачать можно здесь

    Как добавить объект после другого тега javascript -> при загрузке страницы

    Нам понадобится в качестве подопытного объект в данном случае создадим тег example , который обозначим бордюром. чтобы вы его могли увидеть:

    Нам нужна функция, которая сможет обратиться к нашему диву, объекту, тегу — будем использовать querySelector у нас должна получиться вот такая конструкция:

    Ещё нам потребуется метод insertAdjacentHTML

    С параметром afterEnd и вторым параметром устанавливаем текст, блок, тег -в общем все, что вы хотите добавить после блока.

    Соберем весь код вместе:

    Результат добавление тега после тега в javascript

    Теперь расположим данный код на странице и как видим, наш новый объект добавился после нашего же определенного тега через javascript

    Добавление тега после другого тега id -> при клике

    Добавление тега, тега, элемента после другого тега рассмотрели,

    Если ид(либо тег) не уникальный, то событие будет происходить с первым на страницу!

    теперь, пусть это будет кнопка button с каким-то id = to_click

    Чтобы отследить нажатие по кнопке нам понадобится onclick с функцией.

    В действие ставим insertAdjacentHTML + id тега(to_click) + первое значение afterEnd + собственно контент:

    Соберем весь код вместе:

    Живой пример добавление контента после тега, элемента, div по нажатию кнопки:

    Чтобы произошло добавление любого контента после нажатия кнопки — нажмите на неё и вы увидите результат:

    Добавить любой контент после тега по нажатию

    Поскольку мы решили рассмотреть все способы, то теперь выберем.

    Пусть это будет тег, после этого тега добавим любой контент:

    Нам опять нужна кнопка, по нажатию на которую и будет добавляться контент после тега:

    Соберем весь код вместе:

    Здесь содержание тега itsteg

    Добавь контент после тега

    Живой пример добавление контента после тега

    для того, чтобы вживую увидеть добавление любого контнета после тега нажмите нижнюю кнопку:

    Здесь содержание тега itsteg
    Добавь контент после тега

    Добавление тега после другого тега class -> при клике

    Теперь предположим, что у блока есть класс и мы должны добавить что-то после тега с этим классом!

    Создадим какой-то div с классом(class) = «its_class» . style применили для цвета.

    Здесь мы видим, что внутри скобок, в отличии от выше идущего пункта, добавилась точка, что означает, что это класс:

    Соберем весь код добавления контента после тега с классом:

    Добавь контент после тега с классом

    Живой пример добавление любого контента после блока с классом:

    Для того, чтобы добавить любой контент после тега нажмите по ниже идущей кнопке:

    Добавление тега после другого тега name -> при клике

    Как добавить контент после тега input с name

    Нам потребуется input с именем(name)

    Скрипт абсолютно тоже самое, лишь разница в содержании скобок:

    Соберем весь код вместе:

    Живой пример добавление контента после тега input с name

    Чтобы увидеть добавление контента в реальном времени нажмите кнопку и вы увидите результат:

    НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…)

    Изменение документа

    Модификации DOM – это ключ к созданию «живых» страниц.

    Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

    Пример: показать сообщение

    Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

    Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

    Создание элемента

    DOM-узел можно создать двумя методами:

    Создаёт новый элемент с заданным тегом:

    Создаёт новый текстовый узел с заданным текстом:

    Создание сообщения

    В нашем случае сообщение – это div с классом alert и HTML в нём:

    Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.

    Методы вставки

    Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

    Для этого есть метод append , в нашем случае: document.body.append(div) .

    Вот полный пример:

    Вот методы для различных вариантов вставки:

    • node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
    • node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
    • node.before(. nodes or strings) –- вставляет узлы или строки до node ,
    • node.after(. nodes or strings) –- вставляет узлы или строки после node ,
    • node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

    Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

    Наглядная иллюстрация того, куда эти методы вставляют:

    Итоговый список будет таким:

    Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

    Например, здесь вставляется строка и элемент:

    Весь текст вставляется как текст.

    Поэтому финальный HTML будет:

    Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

    Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

    А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

    insertAdjacentHTML/Text/Element

    С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

    Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

    • «beforebegin» – вставить html непосредственно перед elem ,
    • «afterbegin» – вставить html в начало elem ,
    • «beforeend» – вставить html в конец elem ,
    • «afterend» – вставить html непосредственно после elem .

    Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

    Так мы можем добавлять произвольный HTML на страницу.

    Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

    У метода есть два брата:

    • elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
    • elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

    Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

    Так что, вот альтернативный вариант показа сообщения:

    Удаление узлов

    Для удаления узла есть методы node.remove() .

    Например, сделаем так, чтобы наше сообщение удалялось через секунду:

    Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

    Все методы вставки автоматически удаляют узлы со старых мест.

    Например, давайте поменяем местами элементы:

    Клонирование узлов: cloneNode

    Как вставить ещё одно подобное сообщение?

    Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

    Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

    • Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

    Пример копирования сообщения:

    DocumentFragment

    DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

    Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

    Например, getListContent ниже генерирует фрагмент с элементами
    , которые позже вставляются в

      :

    Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

    DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

    Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

    Устаревшие методы вставки/удаления

    Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

    Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

    Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

    Добавляет node в конец дочерних элементов parentElem .

    Следующий пример добавляет новый
    в конец

      :

    Вставляет node перед nextSibling в parentElem .

    Следующий пример вставляет новый элемент перед вторым
    :

    Чтобы вставить newLi в начало, мы можем сделать вот так:

    Заменяет oldChild на node среди дочерних элементов parentElem .

    Удаляет node из parentElem (предполагается, что он родитель node ).

    Этот пример удалит первый
    из

      :

    Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

    Несколько слов о «document.write»

    Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

    Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

    Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

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

    Вызов document.write работает только во время загрузки страницы.

    Если вызвать его позже, то существующее содержимое документа затрётся.

    Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

    Это его недостаток.

    Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

    Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

    Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

    Итого

    Методы для создания узлов:

    • document.createElement(tag) – создаёт элемент с заданным тегом,
    • document.createTextNode(value) – создаёт текстовый узел (редко используется),
    • elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

    Вставка и удаление:

    • node.append(. nodes or strings) – вставляет в node в конец,
    • node.prepend(. nodes or strings) – вставляет в node в начало,
    • node.before(. nodes or strings) –- вставляет прямо перед node ,
    • node.after(. nodes or strings) –- вставляет сразу после node ,
    • node.replaceWith(. nodes or strings) –- заменяет node .
    • node.remove() –- удаляет node .
    • parent.appendChild(node)
    • parent.insertBefore(node, nextSibling)
    • parent.removeChild(node)
    • parent.replaceChild(newElem, node)

    Все эти методы возвращают node .

    Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

    • «beforebegin» – вставляет html прямо перед elem ,
    • «afterbegin» – вставляет html в elem в начало,
    • «beforeend» – вставляет html в elem в конец,
    • «afterend» – вставляет html сразу после elem .

    Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

    Чтобы добавить HTML на страницу до завершения её загрузки:

    После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.

    Задачи

    createTextNode vs innerHTML vs textContent

    У нас есть пустой DOM-элемент elem и строка text .

    Какие из этих 3-х команд работают одинаково?

    1. elem.append(document.createTextNode(text))
    2. elem.innerHTML = text
    3. elem.textContent = text

    решение

    Ответ: 1 и 3.

    Результатом обеих команд будет добавление text «как текст» в elem .

    Создание html-элементов в JavaScript

    В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.

    JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.

    Создание элемента. Метод document.createElement

    Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:

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

    Например, нам необходимо создать элемент-div — частый гость html-страниц. Тогда метод будет использован так:

    Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div-a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.

    Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):

    Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():

    В первом случае вы можете добавить не только текст, но и любые html-теги.

    Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div-у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:

    Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.

    Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement(), причем добавляется он в самый конец родительского элемента.

    Например, создадим изображение и добавим его внутрь div-а с id=»picHolder»:

    Здесь должна появиться картинка с камнем

    Нажмите на кнопочку, пожалуйста.

    Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.

    Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.

    Использование метода insertBefore

    Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:

    Пример: вставляем текст абзаца в div с id=»text» после заголовка h2:

    В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом «Пока это первый абзац».

    Пока это первый абзац.

    Использование метода insertAdjacentHTML и других

    Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:

    1. «beforeBegin» — перед элементом.
    2. «afterBegin» — внутрь элемента, в самое начало, т.е. сразу за открывающим тегом.
    3. «beforeEnd» — внутрь элемента, в конец, т.е. перед закрывающим тегом.
    4. «afterEnd» — после элемента.

    Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:

    Использовать их нужно в зависимости от потребности.

    Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):

    Место для вставки текста

    Код примера (с одним из вариантов строк):

    А теперь используем вставку кода html:

    Дополняемый список

    Добавлять будем код »
    ваш текст внутри «

    В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor() :

    Место для вставки элемента

    Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому 🙂

    Замена элемента на другой

    Если вы не хотите добавлять новый элемент в структуру уже существующего, вы можете заменить тот, что был на новый методом replaceChild(). Делается это несколько сложновато, т.к. при этом надо обратиться к родительскому элементу (узлу) и указать, что именно внутри него мы меняем на новый элемент какой-то из старых элементов.

    Рассмотрим пример, в котором нам нужно заменить первый абзац внутри div-а на заголовок 3-го уровня.

    Этот пример в действии:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa sunt fugiat, tenetur cumque atque?

    Voluptates facere fugit itaque fuga libero nisi maxime minima, ad molestias magnam. Excepturi, quos, ratione.

    Как вы, наверное, заметили, ряд методов несколько сложно воспринимается с точки зрения понимания их синтаксиса. Поэтому в совремненном JavaScript чаще используются другие методы, похожие и по названию, и по действию, но со значительно более понятным синтаксисом.

    Новые методы вставки элементов в html-разметку

    С внедрением стандартов ES5 и ES6 в JavaScript появились новые методы, упрощающие манипуляции со вставкой элементов в html-разметку страницы. Не последнюю роль в этих нововведениях сыграла библиотека jQuery, т.к. в ней такие методы были реализованы уже очень давно.

    Например, вместо метода appendChild() мы можем применить метод append() — и элемент появится в самом низу родительского элемента. И это еще не все. Рассмотрим новые методы:

    • elem.append(узлы или строки) – добавляет узлы или строки в конец элемента elem ,т.е. после последнего его дочернего элемента, если таковой есть;
    • elem.prepend(узлы или строки) – добавляет узлы или строки в начало elem , т.е. перед первым его дочерним элементом, если таковой есть;
    • elem.before(узлы или строки) – вставляет узлы или строки до elem , т.е. перед самим элементом, а не внутри него;
    • elem.after(узлы или строки) – добавляет узлы или строки после elem , т.е. не внутрь элемента, а сразу за ним;
    • elem.replaceWith(узлы или строки) – заменяет elem заданными узлами или строками, замещая его содержимое.

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

    За счет того, что родительский элемент с блоками имеет свойство display: flex , и строки, и новый блок размещаются в виде новой колонки. Но при использовании любого метода для блока, он перемещается, т.к. ни один из методов не предполагает клонирования блока. Он как бы переносится из одного места в другое, когда вы после использования метода append() решаете посмотреть на действие метода prepend() или after() для элемента. При использовании этих же методов для строк текст строки присоединяется заново в соответствующем названию метода месте.

    Обратите внимание, что метод replaceWith() заменяет элемент на указанный в скобках другой элемент или строку, и после этого другие методы не работают. Поэтому нажмите на кнопку «Обновить», если хотите еще раз попробовать применить все методы.

    Как добавить тег html в javascript.

    Я хочу использовать один тег html в своем javascript, но не знаю, как это сделать.

    An absolute URL: W3Schools

    это мой жетон. Я хочу сохранить это в некоторую переменную, чтобы потом использовать ее в своей функции. Но я не знаю, как его хранить. По дороге я добрался до магазина вроде

    Но опять же это объект, который я не могу использовать пертикулярный якорный тег. Может ли кто-нибудь предложить, как с этим бороться? Как хранить html тегов в переменной javascript или любые решения.

    7 Ответов

    Мы можем назначить шаблон строки непосредственно, вызвав innerHTML для вновь созданного элемента и вернув его childNode. Таким образом, мы можем добавить пользовательские атрибуты к новому элементу DOM, а также добавить его в строку шаблона.

    Вы можете создать элемент html как объекты в JavaScript, используя метод document.createElement() ,

    Чтобы создать и сохранить следующую строку html в JavaScript как объект:

    An absolute URL: W3Schools

    Сначала вам нужно будет создать родительский тег

    Далее вам нужно будет создать объект якорного тега следующим образом,

    Далее добавьте тег якоря как дочерний к тегу

    Таким образом, теперь вы можете ссылаться на свой объект ptag и anchorTag последний.

    Это возможно, и вы можете сохранить его в виде строки. Если вы изо всех сил пытаетесь заставить его работать из-за путаницы котировок, правильным будет

    Обратите внимание на одинарные кавычки. Поскольку вы уже использовали двойные кавычки для href, строка должна быть обернута одинарными кавычками.

    Попробуйте использовать этот код. Вложите свой блок кода html В » и он должен работать.

    An absolute URL: W3Schools

    Я думаю, что вы должны заключить этот html в » (для правильного sitaxis), или, второй вариант-создать объект Dom с помощью Javascript.

    Тогда вы можете редактировать и изменять как реальную html не простую строку.

    Надеюсь, это поможет вам.

    Я думаю, что вы можете получить его как элемент:

    ВАР Эл = document.getElementById(‘something’);

    и используйте его в своей функции

    есть два способа получить элемет;

    —-в обратном направлении—-

    создание элемента с помощью js

    Похожие вопросы:

    Я пытаюсь добавить тег внутри в торт php Мне нужен такой выход Logout но я не знаю, как добавить тег в этот.

    Как добавить тег html к тегу JSLint ? У меня есть некоторые ошибки с сообщением : JSLint: Unrecognized tag ‘foo’. Я хотел бы добавить тег foo в html_tag, распознанный JSLint.

    Я хочу добавить тег html без окончания тега, как это

    У меня есть посадочная страница с динамическими тегами html. Проблема в том, что я не могу выбрать непосредственно тег. Это связующее звено. следующий код является конструкцией:

    Можно ли добавить тег html, как в части тела mailto? Если нет, дайте какой-то другой обходной путь для достижения этой цели? Мне нужен любой другой протокол, чтобы открыть почтовый клиент и.

    Я пытаюсь использовать какой-то тег html внутри Javascript.But, тег Html не работает. Как я могу использовать html тег внутри javascript. Я хотел использовать тег h1 внутри Javascript, но не.

    Я бы хотел вставить тег html в Javascript, между скриптом> tag Спасибо

    Я пытаюсь применить class на HTML тег, если тег существует. Я пробовал этот код : index .

    Я создал тег href, передающий файл pdf, и я получаю это значение href в javascript, и я должен передать эту переменную javascript в тег html, как это возможно, это возможно, пожалуйста, помогите.

    Кто-нибудь может помочь, как поместить тег HTML в код Javascript ниже? Мой план состоит в том, чтобы иметь пробел после слова entries. Ниже приведен код Javascript.

    Как вывести текст в JavaScript

    На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.

    Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.

    Заменить текст в JavaScript

    Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.

    Для получения параграфа для работы:

    Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.

    Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:

    p.innerHTML = ‘Текст заменили’;

    После клика по кнопке, замена произошла успешно.

    Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.

    Что будет, если кавычки оставить пустыми?

    Тогда параграф очистится, текущая запись удалится, а новая не вставится.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.

    В инспекторе кода, мы увидим уже новый код, на месте старого.

    Читать еще:  Работа с базами данных java
Ссылка на основную публикацию
Adblock
detector