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

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]

Куда и кого надо добавить, о каком data-атрибуте идёт речь:

const containerSelector = '.class-1';
const tag = 'div';
const key = 'name';
const attrSelector = `[data-${key}]`;

Добавляем:

$(containerSelector).prepend(function() {
  return $(`<${tag}>`).text($(attrSelector, this).data(key));
});

или

document.querySelectorAll(containerSelector).forEach(n => {
  const val = n.querySelector(attrSelector).dataset[key];

  // можем добавлять разметку
  n.insertAdjacentHTML('afterbegin', `<${tag}>${val}</${tag}>`);

  // или элемент
  const el = document.createElement(tag);
  el.textContent = val;

  n.prepend(el);
  // или
  // n.firstChild.before(el);
  // n.insertBefore(el, n.firstChild);
  // n.insertAdjacentElement('afterbegin', el);
  // n.firstChild.replaceWith(el, n.firstChild);
});

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