Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.05.2021, 08:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 14.05.2021 в 08:55. Причина: заменил на afterend
Ответить с цитированием
  #12 (permalink)  
Старый 14.05.2021, 08:51
Аспирант
Отправить личное сообщение для repz Посмотреть профиль Найти все сообщения от repz
 
Регистрация: 01.12.2014
Сообщений: 59

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


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

Последний раз редактировалось repz, 14.05.2021 в 08:59.
Ответить с цитированием
  #13 (permalink)  
Старый 14.05.2021, 09:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от repz
"DOMContentLoaded" не отрабатывает .
ставьте скрипт без DOMContentLoaded, внизу страницы.
Ответить с цитированием
  #14 (permalink)  
Старый 14.05.2021, 09:06
Аспирант
Отправить личное сообщение для repz Посмотреть профиль Найти все сообщения от repz
 
Регистрация: 01.12.2014
Сообщений: 59

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

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

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


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

Последний раз редактировалось repz, 14.05.2021 в 09:18.
Ответить с цитированием
  #15 (permalink)  
Старый 14.05.2021, 09:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от repz
выводит ${content}
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё
Ответить с цитированием
  #16 (permalink)  
Старый 14.05.2021, 09:23
Аспирант
Отправить личное сообщение для repz Посмотреть профиль Найти все сообщения от repz
 
Регистрация: 01.12.2014
Сообщений: 59

Сообщение от рони Посмотреть сообщение
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё
Кавычки я сразу поправил)) иначе бы не завелся совсем.

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 в 09:25.
Ответить с цитированием
  #17 (permalink)  
Старый 14.05.2021, 11:36
Аспирант
Отправить личное сообщение для repz Посмотреть профиль Найти все сообщения от repz
 
Регистрация: 01.12.2014
Сообщений: 59

Сообщение от рони Посмотреть сообщение
кавычки !!! ищите на своей клавиатуре ))) у меня там где Ё
Да) стояли `` редактор не смог распознать стиль форматирования, подумал ошибка) и поставил ' '.

Все работает.
Спасибо еще раз.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить значение из динамического span miks.core Общие вопросы Javascript 3 20.04.2017 11:33
вопрос по видимости переменных. yiooxir Angular.js 3 31.10.2013 12:37
Получить атрибут тега. Не могу понять почему ошибки. inhab Opera, Safari и др. 7 21.07.2013 14:22
Как получить raw data с image? lyapharov Общие вопросы Javascript 2 07.04.2011 00:20
Как получить атрибут из CSS файла ? sionus Events/DOM/Window 1 04.01.2010 09:39