Получить атрибут data и подставить в span

[repz]

Добрый день.
Столкнулся с непониманием))

Пытаюсь выдернуть data-content из

<span class="badge" data-content="Иванов"><i class="fa fa-gavel"></i> </span>
<span class="badge" data-content="Петров"><i class="fa fa-gavel"></i> </span>
<span class="badge" data-content="Сидоров"><i class="fa fa-gavel"></i> </span>

и вставить его в этот же span.

Делал так

let bt = Document.getElementsByClassName(".badge");
let data = bt.getAttribute("data-content");

и так

let bt = Document.getElementsByClassName(".badge");
bt.dataset.content;

Ни в какую не хочет.

Спасибо.

[рони]

repz,
укажите какой именно элемент в списке вам нужен!!! сотни людей до вас совершили эту ошибку, попробуйте добавить индекс самостоятельно.

[repz]

3 Span я добавил для наглядности.
я не могу по коду js даже для 1 элемента прочитать data-content.
https://jsfiddle.net/a1gcyue8/

[рони]

я не могу по коду js даже для 1 элемента прочитать data-content.

укажите класс нужного элемента!!!
читать про селекторы css!!!

[рони]

repz,
https://learn.javascript.ru/css-selectors

[repz]

Не совсем понял про селекторы. Сообщение набирал - ошибся, поправил в 1.

[рони]

Не совсем понял про селекторы.

переходим по ссылке выше
абзац Основные виды селекторов
читаем ...
.class – элементы с таким классом.

[рони]

repz,
для кода в пункте 1 нужен цикл,
а для кода в песочнице не хватает одного символа

[repz]

Как-то так:

var elems = document.querySelectorAll(".badge");
for( let i = 0; i < elems.length; i++){ 
     let dc = elems[i].getAttribute("data-content");
      console.log(dc);
	  }

Вот полный код:

var elems = document.querySelectorAll(".badge");
for( let i = 0; i < elems.length; i++){ 
     var dc = elems[i].getAttribute("data-content");  
     var p = document.createElement("p");
     var text = document.createTextNode(dc);
     p.appendChild(text);
     elems[i].appendChild(p);
	  }

Надеюсь все так)

Спасибо за наводки.

[рони]

Надеюсь все так)

чуть проще через elems.forEach и elem.dataset и elem.insertAdjacentHTML