Как добавить текст в div через js
Перейти к содержимому

Как добавить текст в div через js

  • автор:

Как добавить текст в div с помощью JS&?

В этот див нужно в конец при помощи js добавить текст. Не заменить весь текст, а именно добавить.

Подскажите как реализовать плизз.

Дополнен 10 лет назад

div >
Тут различный текст с html тегами.
/div>

Дополнен 10 лет назад
РЕБЯТА. ДОБАВИТЬ К УЖЕ СУЩЕСТВУЮЩЕМУ КОНТЕНТУ.
Лучший ответ

var pirduha = getElementById(‘content’);
pirduha.innerHTML = pirduha.innerHTML+’тут всякий бредовый текст’;

Остальные ответы
http://javascript.ru/forum/misc/11374-kak-vstavit-tekst-v-div.html
гуглить научись
var ololo.innerHTML = «твой текст для добавления»;
Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

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

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

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

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

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

 .alert 
Всем привет! Вы прочитали важное сообщение.

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

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

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

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

let div = document.createElement('div');

document.createTextNode(text)

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

let textNode = document.createTextNode('А вот и я');

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

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

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

let div = document.createElement('div'); div.className = "alert"; div.innerHTML = "Всем привет! Вы прочитали важное сообщение.";

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

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

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

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

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

 .alert

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

  • 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 заданными узлами или строками.

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

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

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

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

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

Привет






', document.createElement('hr'));

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

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

<p>Привет</p> 


Другими словами, строки вставляются безопасным способом, как делает это 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».


Привет
'); div.insertAdjacentHTML('afterend', '
Пока
'); 


Привет
 

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


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


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








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



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


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


 .alert  


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


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


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


 .alert  


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


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


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








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


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


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


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


    

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



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


 .alert 
Всем привет! Вы прочитали важное сообщение.
  


DocumentFragment


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


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


 return fragment; > ul.append(getListContent()); // (*) 


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








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


 return result; > ul.append(. getListContent()); // append + оператор ". " = друзья! 


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


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


Старая школа

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


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


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


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


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








parentElem.insertBefore(node, nextSibling)


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


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


list.insertBefore(newLi, list.firstChild);


parentElem.replaceChild(node, oldChild)


Заменяет 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 .
    

      

    • "beforebegin" – вставляет html прямо перед elem ,
      • 

    • "afterbegin" – вставляет html в elem в начало,
      • 

    • "beforeend" – вставляет html в elem в конец,
      • 

    • "afterend" – вставляет html сразу после elem .
      • 

    

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

      

    • document.write(html)
      • 

    

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

    Вставка текста и 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-кода в любое место страницы относительно опорного элемента.
    

    

      site.komp36.ruКак работать на себя? Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
    

    

      site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
    

    

      site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
    

    Читайте также.
    

    

    Вставка элементов на страницу - Cвойство classList – Добавление классов
    

    

    Свойства textContent и innerText - Доступ и изменение текста узла
    

    

    Свойство innerHTML - Получение и замена кода узла
    

    

      site.komp36.ruКак работать на себя? Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
    

    

      site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
    

    

      site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
    

    Как изменить текст в html через js
    

    Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.
    

    Исходный HTML документ
    

      class="text">Здесь могла быть ваша реклама  onClick="changeText();">Нажми чтобы изменить  
    

    В раздел со скриптами на странице добавим определение функции:
    

    const changeText = () =>  // Выбираем элемент на странице, и меняем содержимое нужного поля document.getElementsByClassName('text')[0].textContent = "Кто сказал мяу?"; > 
    

    


    Похожие публикации:
      

    1. Bean spring что это
      2. 

    2. Как отключить подписку wink на телефоне
      3. 

    3. Как проверить надежность vpn
      4. 

    4. Как убрать разрыв страницы в ворде
      5.

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

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