Получить атрибут data и подставить в span
Добрый день.
Столкнулся с непониманием)) Пытаюсь выдернуть 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,
укажите какой именно элемент в списке вам нужен!!! сотни людей до вас совершили эту ошибку, попробуйте добавить индекс самостоятельно. |
3 Span я добавил для наглядности.
я не могу по коду js даже для 1 элемента прочитать data-content. https://jsfiddle.net/a1gcyue8/ |
Цитата:
читать про селекторы css!!! |
|
Не совсем понял про селекторы. Сообщение набирал - ошибся, поправил в 1.
|
Цитата:
абзац Основные виды селекторов читаем ... .class – элементы с таким классом. |
repz,
для кода в пункте 1 нужен цикл, а для кода в песочнице не хватает одного символа |
Как-то так:
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);
}
Надеюсь все так) Спасибо за наводки. |
Цитата:
|
repz,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", () => {
const elems = document.querySelectorAll(".badge");
elems.forEach(elem => {
const { content } = elem.dataset;
elem.insertAdjacentHTML("afterend", `<p>${content}</p>`)
})
});
</script>
</head>
<body>
<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>
</body>
</html>
|
Сделал так, для того, что бы вставить после <span>
elems[i].insertAdjacentElement('afterend', p);
Спасибо, пока такой синтаксис сложноват для меня) В моих условиях "DOMContentLoaded" не отрабатывает . |
Цитата:
|
Делаю по аналогии с тем, что есть, поэтому пишу в шапку и делаю settimeout.
Использовал ваш пример, вместо значения выводит ${content}, при этом на jsfiddle все норм. И еще вопрос, если в селекторе надо например несколько классов, т.е. не
document.querySelectorAll(".class.class2");
а например:
document.querySelectorAll(".class || .class2");
|
Цитата:
|
Цитата:
const elems = document.querySelectorAll(".badge");
elems.forEach(elem => {
const { content } = elem.dataset;
elem.insertAdjacentHTML("afterend", '<p>${content}</p>')
});
Вот и ответ кстати в селекторе ИЛИ
document.querySelectorAll("class, class2");
|
Цитата:
Все работает. Спасибо еще раз. |
| Часовой пояс GMT +3, время: 03:18. |