Содержание страницы
домикГлавная / Скрипты java и php / JS добавить текст
js добавить текстВ этой статье рассмотрим примеры, как можно с помощью клика на JS добавить текст к уже имеющемуся тексту. На примерах разберём, как добавить текст спереди и сзади текущего текста, а так же добавить текст до и после родительского элемента.
Здесь так же воспользуемся подготовленным текстом и кнопкой, а функционал добавления текста пропишем в JS.

Пример 1: добавим текст к существующему.

Имеющийся текст

html и jsCOPY
<p class="zar">Имеющийся текст</p> <button class="du" type="text">Добавить текст</button> <script> var du = document.querySelector('.du'); du.onclick = function(){ document.querySelector('.zar').innerHTML += ' <b>+ добавленный новый текст</b>.';}; du.onclick = null; } </script>

Пример 2: добавить текст перед родительским элементом <p>.

Обратите внимание
В последующих примерах для добавления текста JS в необходимое место, родителем может служить не только параграф <p> ( я его использовал в качестве примера ), но и любой другой элемент страницы.

Имеющийся текст

html и jsCOPY
<p class="dar">Имеющийся текст</p> <button class="me" type="text">Добавить текст</button> <script> var me = document.querySelector('.me'); me.onclick = function(){ document.querySelector('.dar').insertAdjacentHTML('beforeBegin', '<p><b>Добавленный новый текст перед родителем</b>.</p>'); me.onclick = null; } </script>

Пример 3: добавить текст после родителя <p>.

Имеющийся текст

html и jsCOPY
<p class="ben">Имеющийся текст</p> <button class="sa" type="text">Добавить текст</button> <script> var sa = document.querySelector('.sa'); sa.onclick = function(){ document.querySelector('.ben').insertAdjacentHTML('afterEnd', '<p><b>Добавленный новый текст после родителя</b>.</p>'); sa.onclick = null; } </script>
В последних 2-ух примерах, я покажу как добавить текст непосредственно в начало и в конец родительского элемента посредством того же JS. Для разнообразия в качестве родителя я возьму <div>.

Пример 4: добавить текст в начало родителя <div>.

имеющийся текст.
html и cssCOPY
<div class="sub">имеющийся текст.</div> <button class="ze" type="text">Добавить текст</button> <script> var ze = document.querySelector('.ze'); ze.onclick = function(){ document.querySelector('.sub').insertAdjacentHTML('afterBegin', '<b>Добавленный новый текст в начало родителя</b> '); ze.onclick = null; } </script>

Пример 5: добавить текст в конец родителя <div>.

Имеющийся текст
html и cssCOPY
<div class="sud">имеющийся текст.</div> <button class="re" type="text">Добавить текст</button> <script> var re = document.querySelector('.re'); re.onclick = function(){ document.querySelector('.sud').insertAdjacentHTML('beforeEnd', ' <b>добавленный новый текст в конец родителя</b>'); re.onclick = null; } </script>
Дата публикации: 21.04.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!