Как скопировать текст элемента в его data-атрибут?

Рейтинг: 0Ответов: 1Опубликовано: 15.01.2023

На сайте есть несколько элементов с классом js-data-content. Нужно придумать скрипт, который будет в каждом таком элементе брать его текстовый контент и вставлять его в атрибут data-content.

Например из:

<a class="js-data-content" href="#">Текст</a>
<p class="js-data-content">Lorem ipsum</p>

Сделать:

<a class="js-data-content" href="#" data-content="Текст">Текст</a>
<p class="js-data-content" data-content="Lorem ipsum">Lorem ipsum</p>
javascript атрибуты
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можно так:

  1. Выбираем все элементы с классом js-data-content с помощью querySelectorAll

  2. Проходимся по всем элементам с помощью forEach

  3. Достаём именно текстовое содержимое с помощью textContent

  4. С помощью setAttribute устанавливаем значение аттрибуту data-content

document
  .querySelectorAll('.js-data-content')
  .forEach(element => {
    element.setAttribute('data-content', element.textContent);
  })
<a class="js-data-content" href="#">Текст</a>
<p class="js-data-content">Lorem ipsum</p>