Форум

рони · #11 (**permalink**) 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 · #12 (**permalink**) 14.05.2021, 08:51

Сделал так, для того, что бы вставить после <span>

elems[i].insertAdjacentElement('afterend', p);

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

рони · #13 (**permalink**) 14.05.2021, 09:04

Сообщение от repz

"DOMContentLoaded" не отрабатывает .

ставьте скрипт без DOMContentLoaded, внизу страницы.

repz · #14 (**permalink**) 14.05.2021, 09:06

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

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

И еще вопрос, если в селекторе надо например несколько классов, т.е. не

document.querySelectorAll(".class.class2");

а например:

document.querySelectorAll(".class || .class2");

рони · #15 (**permalink**) 14.05.2021, 09:17

Сообщение от repz

выводит ${content}

кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё

repz · #16 (**permalink**) 14.05.2021, 09:23

Сообщение от рони

кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё

Кавычки я сразу поправил)) иначе бы не завелся совсем.

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

Вот и ответ кстати в селекторе ИЛИ

document.querySelectorAll("class, class2");

repz · #17 (**permalink**) 14.05.2021, 11:36

Сообщение от рони

кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё

Да) стояли `` редактор не смог распознать стиль форматирования, подумал ошибка) и поставил ' '.

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

Форум

Справочник

Discord чат

Курсы javascript