Как взять элемент и название тега в div

@Aleks00231 · Регистрация: 05.02.2019

Студворк — интернет-сервис помощи студентам

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

HTML:

HTML5
1
<div contenteditable id="editor-container"></div>

@Андрей МСК · 29.06.2019, 00:57

Если вам нужен элемент целиком, то как-то так:

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this)[0].outerHTML);
  });

Если нужно только название тега:

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this).get(0).tagName);
  });

Если только содержимое

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this).html());
  });

@klopp · 29.06.2019, 04:55

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

Сообщение от Aleks00231

мне нужно брать элемент

JavaScript
1
2
3
let editor = document.getElementById('editor-container');
console.log(editor);
console.log(editor.tagName);//DIV

Сообщение от Aleks00231

при нажатие на него

с кликом всё несколько сложнее

JavaScript
1
editor.addEventListener('click', (e) => console.log(e.target.tagName));

e.target - это элемент на котором произошло событие(click в нашем случае).
Если у вашего дива нет вложенных элементов, то это будет он сам.
А если есть вложенные например, <p> или <span> или другие дивы, то в e.target будет тот элемент на котором произошел клик.

@Андрей МСК · 29.06.2019, 13:42

Сообщение от klopp

не понимаю зачем подключать целую библиотеку

Она вроде не такая большая. Сейчас много плагинов её использует.
И код на мой взгляд проще для понимания

@Mr_Sergo · 29.06.2019, 19:03

Aleks00231,

https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
<span id="spsp">span</span>
<div contenteditable id="editor-container">div</div>
<input type="button" id="inp-btn" value="input">
<button id="btn">button</button>

JavaScript
1
document.addEventListener('click',e => alert(`Тег: ${e.target.tagName.toLowerCase()}\nИд: ${e.target.id}`) );

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

Как взять элемент и название тега в div

Решение