Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получить атрибут data и подставить в span (https://javascript.ru/forum/misc/82476-poluchit-atribut-data-i-podstavit-v-span.html)

рони 14.05.2021 08:51
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>

repz 14.05.2021 08:51
Сделал так, для того, что бы вставить после <span>
elems[i].insertAdjacentElement('afterend', p);


Спасибо, пока такой синтаксис сложноват для меня)
В моих условиях "DOMContentLoaded" не отрабатывает .

рони 14.05.2021 09:04
Цитата:
Сообщение от repz
"DOMContentLoaded" не отрабатывает .
ставьте скрипт без DOMContentLoaded, внизу страницы.

repz 14.05.2021 09:06
Делаю по аналогии с тем, что есть, поэтому пишу в шапку и делаю settimeout.

Использовал ваш пример, вместо значения выводит ${content}, при этом на jsfiddle все норм.

И еще вопрос, если в селекторе надо например несколько классов, т.е. не
document.querySelectorAll(".class.class2");


а например:
document.querySelectorAll(".class || .class2");

рони 14.05.2021 09:17
Цитата:
Сообщение от repz
выводит ${content}
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё

repz 14.05.2021 09:23
Цитата:
Сообщение от рони (Сообщение 536595)
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё
Кавычки я сразу поправил)) иначе бы не завелся совсем.

const elems = document.querySelectorAll(".badge");
            elems.forEach(elem => {
                const { content } = elem.dataset;
             elem.insertAdjacentHTML("afterend", '<p>${content}</p>')
            });


Вот и ответ кстати в селекторе ИЛИ
document.querySelectorAll("class, class2");

repz 14.05.2021 11:36
Цитата:
Сообщение от рони (Сообщение 536595)
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё
Да) стояли `` редактор не смог распознать стиль форматирования, подумал ошибка) и поставил ' '.

Все работает.
Спасибо еще раз.


Часовой пояс GMT +3, время: 15:25.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице