Как добавить в dom элементы с выполнением скриптов?

Ссылка скопирована
AJAX JavaScript
1 ответ

Здравствуйте.

Сейчас на сайте используется JQuery, потихоньку отказываюсь от него, но возникли сложности с обработкой конетна получаемого через ajax.

Сейчас c использованием $.post() все просто, достаточно в подгружаемом html добавить нужные скрипты в <script> ... </script> и все будет работать.
На нативном js, через fetch() такая конструкция не работает.
Ситуационно я выхожу из положения через:

  • .target
  • вынос скриптов в отдельный объект и выполнение в new Function() или eval()
  • обращение к функциям через onclick и прочим

Но это все костыли. Если на странице много используется аякса нужно что то универсальное.

Подскажите, есть ли готовой универсальный механизмы работы с контентом из ajax? Может библиотеки какие?
На бэкенде остается php, по этому js фреймворки типа React, vue и тд не подходят.

P.S. Нагуглить пытался, не нагуглилось.

Дополнительно:

Делегирование событий - то, что Вы ищите.

  • Сейчас на сайте используется JQuery, потихоньку отказываюсь от него

    Просто потому что модно? Оставьте сайт в покое, откажитесь от JQuery в следующем проекте и не придумывайте проблемы на ровном месте.

  • Александр, да, спасибо. Усложняет конечно код, но на нативном js без этого ни как видимо.
  • Виталий Першин, я в задаче упростил, что бы не расписывать суть поставленных задач. Сайт переписывать не будем, там проще отформатировать и заново сделать, будет отдельный раздел, где хочется отказаться от jquery.

    По моде хороший вопрос, мне кажется что все таки решение обусловлено тем что jquery стимулирует писать плохой код, и много весит, но возможно я поддался просто влянию моды, и сам себе придумал причины что нативыный лучше

    • при динамическом добавлении разметки со script, его содержимое не выполняется, универсальным способом будет пройтись по добавленному куску разметки, найти все такие элементы и потом пересоздать их заменив новыми оригиналы:

    element.innerHTML = /* разметка */ for (const sourceElement of element.querySelectorAll('script')) {     const resultElement = document.createElement('script');     resultElement.textContent = sourceElement.textContent;     for (const attribute of sourceElement.getAttributeNames()) {         resultElement.setAttribute(attribute, sourceElement.getAttribute(attribute));     }     sourceElement.replaceWith(resultElement); }

    element.innerHTML = /* разметка */ for (const sourceElement of element.querySelectorAll('script')) { const resultElement = document.createElement('script'); resultElement.textContent = sourceElement.textContent; for (const attribute of sourceElement.getAttributeNames()) { resultElement.setAttribute(attribute, sourceElement.getAttribute(attribute)); } sourceElement.replaceWith(resultElement); }

    • Спасибо. Рабочий вариант.
      Все им не закроешь, но совместно с делегированием вроде пошел процесс.

    Ответы:

    JQuery состоит из частей, собственно если нужен только ajax, можно взять https://github.com/jquery/jquery/blob/main/src/ajax.js , но я бы все-таки посоветовал освоить fetch

    • Спасибо. Но соглашусь что все таки лучше довести до ума fetch
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Павел Админов Ответ

    Для добавления элементов в DOM с выполнением скриптов, вам необходимо использовать метод `innerHTML` или `insertAdjacentHTML`. Однако, при использовании этих методов, нужно быть осторожным, так как это может привести к уязвимостям безопасности, таким как XSS (межсайтовый скриптинг).

    Пример использования метода `innerHTML`:

    var element = document.getElementById('myElement');
element.innerHTML = '<button>Click me</button>';

    var element = document.getElementById('myElement'); element.innerHTML = '<button>Click me</button>';

    Пример использования метода `insertAdjacentHTML`:

    var element = document.getElementById('myElement');
element.insertAdjacentHTML('beforeend', '<button>Click me</button>');

    var element = document.getElementById('myElement'); element.insertAdjacentHTML('beforeend', '<button>Click me</button>');

    Если вы хотите добавить скрипты без выполнения, то вам необходимо создать элемент `script`, добавить в него код скрипта и добавить его в DOM:

    var script = document.createElement('script');
script.innerHTML = 'function myFunction() { console.log("Hello World!"); }';
document.body.appendChild(script);

    var script = document.createElement('script'); script.innerHTML = 'function myFunction() { console.log("Hello World!"); }'; document.body.appendChild(script);

    Однако, помните, что добавление скриптов динамически может быть опасно, поэтому убедитесь, что код, который вы добавляете в DOM, безопасен и не содержит уязвимостей.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов