Как вывести атрибут?

Question

[BValentin]

Подскажите, пожалуйста, как правильно получить и вывести атрибут

Имеется такая структура:

<div class="class-1">
<!-- сюда поставить <div>ИМЯ 1</div> -->
<div class="class-2">	
<div class="class-3">	
	<span data-name="ИМЯ 1"></span>
</div>
</div>
</div>

<div class="class-1">
<!-- сюда поставить <div>ИМЯ 2</div> -->
<div class="class-2">	
<div class="class-3">	
	<span data-name="ИМЯ 2"></span>
</div>
</div>
</div>

Answer 1

[0xD34F]

document.querySelectorAll('[data-name]').forEach(n => {
  n.closest('.class-1').insertAdjacentHTML('afterbegin', `<div>${n.dataset.name}</div>`);
});

или

$('.class-1').prepend(function() {
  return $('<div>').text($('span', this).data('name'));
});

Comments

[BValentin]

премного благодарен :)

Answer 2

[Alex]

Все атрибуты data-* можно получить через свойство dataset
HTMLElement.dataset.name // ИМЯ 1

1. Взять div
   
2. Найти в нем элемент с нужным атрибутом
   
3. Получить значение атрибута
   
4. Создать новый div
   
5. Вставить в него значение атрибута
   
6. Добавить этот див в DOM
   

Comments

[BValentin]

Максимум что придумал, это:

$('.class-3 span').each(function() {
	let name = $(this).data('name');
	$(this).before('<div class="name">' + name +' </div>');
});

Но мне нужно вставить данные в ранние дивы, а тут ....
Я в JS не силен никак вообще

[BValentin]

6 - Добавить этот див в DOM

Вот тут проблема.... не знаю как ...

Этих блоков полно, датf у меня в одном месте, а вставлять надо выше через 2 тега....

Answer 3

[Сергей Соколов]

В jQuery это метод data()

Comments

[BValentin]

Я получаю значение дата, но как их вставить не before, а before до before и еще раз до before