Получаем текст из div javascript, с примером

Как "получить текст из div js". Рассмотрим несколько вариантов получения текста из тега div, в примере будем использовать тег div.

Варианты получения текста из тега div:

1. Получим текст из тега div при клике на тег.
2. Получим текст из тега div при клике на другой тег.
3. Получим текст из тега div при клике на другой тег 3.
4. Получим текст из тега div при клике на другой тег 4.

1. Получим текст из тега div при клике на тег.

Для того, чтобы получить текст из "div" : вам понадобится:

В div помещаем произвольный текст:

Нажми на меня и получи текст javascript

Внутри открывающего тега помещаем:

alert.

this.

innerHTML.

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

Код получения текста из элемента при клике на него:

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

<div onclick="alert(this.innerHTML)">Нажми на меня и получи текст javascript</div>

Пример получения текста из элемента при клике на него:

Для того, чтобы протестировать живой пример "получения текста из элемента при клике на него" нажмите по ниже идущему тексту : "Нажми на меня и получи текст javascript"

Нажми на меня и получи текст javascript

2. Получим текст из тега div при клике на другой тег.

Для того, чтобы получить "текст из тега div при клике на другой тег" вам понадобится:

Html:

Первый div с id произвольного значения, откуда будем получать текст:

<div id="get_text_js">Получи текст javascript - 2</div>

Далее нам понадобится второй элемент - используем button, туда помещаем:

onclick.

Функцию с произвольным названием:

foo()

<button onclick="foo()">Нажми и получи текст javascript - 2</button>

javascript:

Используем тег script, в него помещаем:

Создадим функцию с тем же названием.

Далее alert.

Любым способом обратиться по id.

Используем innerHTML для получения текста из тега div.

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

Код получения текста из элемента при клике на другой тег:

Соберем следующий код, о котором написали выше:

Html:

<div id="get_text_js">Получи текст javascript - 2</div>

<button onclick="foo()">Нажми и получи текст javascript - 2</button>

javascript:

<script>

function foo(){

alert(get_text_js.innerHTML);

}

</script>

Пример получения текста из элемента при клике на него:

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

И чтобы протестировать работу примера нажмите по кнопке с текстом: "Нажми и получи текст javascript - 2"

Получи текст javascript - 2
Нажми и получи текст javascript - 2

3. Получим текст из тега div при клике на другой тег 3.

Следующий вариант "получения текста из тега div при клике на другой тег"... для этого вам понадобится:

Html:

Опять два тега:

<div id="get_text_js_3">Получи текст javascript - 3</div>

<button id="button_get_text_js">Нажми и получи текст javascript - 3<</button>

javascript:

Далее опять теги script, туда помещаем:

Любым из способов обратиться по id, туда присоединяем:

onclick.

В функции прописываем alert.

Опять обратиться по id и

innerHTML

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

Код получения текста из элемента при клике на другой тег:

Снова соберем код, о котором написали выше:

Html:

<div id="get_text_js_3">Получи текст javascript - 3</div>

<button id="button_get_text_js">Нажми и получи текст javascript - 3<</button>

javascript:

<script>

button_get_text_js . onclick = function(){

alert(get_text_js_3.innerHTML);

}

</script>

Пример получения текста из элемента при клике на него:

Теперь применим выше приведенный пример кода.

Чтобы протестировать работу примера нажмите по кнопке с текстом: "Нажми и получи текст javascript - 3"

Получи текст javascript - 3
Нажми и получи текст javascript - 3<

4. Получим текст из тега div при клике на другой тег 4.

И следующий вариант - всё тоже самое, что и в предыдущем способе получения текста из тега div, только используем в onclick - addEventListener

Код получения текста из элемента при клике на другой тег:

Снова соберем код, о котором написали выше:

Html:

<div id="get_text_js_4">Получи текст javascript - 4</div>

<button id="button_get_text_js_4">Нажми и получи текст javascript - 4<</button>

javascript:

<script>

button_get_text_js_4 .addEventListener('click', function()

{

alert(get_text_js_4.innerHTML);

});

</script>

Пример 4: получение текста из элемента при клике на него.

Теперь применим выше приведенный пример кода.

Чтобы протестировать работу примера нажмите по кнопке с текстом: "Нажми и получи текст javascript - 4"

Получи текст javascript - 4
Нажми и получи текст javascript - 4<

Всего комментариев : Comments+ 2.0

+ =