За последние 24 часа нас посетили 19415 программистов и 1667 роботов. Сейчас ищут 1224 программиста ...

Динамическое создание элементов DOM

Тема в разделе "JavaScript и AJAX", создана пользователем AlexsaiL, 15 окт 2018.

  1. AlexsaiL

    AlexsaiL Активный пользователь

    С нами с:
    23 дек 2016
    Сообщения:
    327
    Симпатии:
    23
    Динамически создаю DOM элементы. При каждом попадании в функцию js передаю данные, далее ответ сервера, в success создаю элемент с уникальным id используя
    Код (Javascript):
    1. var div = document.createElement("div");
    2. div.id = ...
    при первом вызове этой функции все отрабатывает правильно, создает элемент, отображается в DOM структуре, при повторном попадании создает также элемент присваивает ему id, но когда использую appendChild() ругается: Cannot read property 'appendChild' of null. Я как понимаю скрипт отрабатывается раньше загрузки разметки... Какими путями можно решить данную задачу?
     
  2. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
    @AlexsaiL, слишком много общих слов и мало конкретики.
    Загляните ещё раз: добавление и удаление узлов и сравните с тем, что делаете сами.
    Ещё полезно попутно в консоль выводить значения требующих внимания элементов.
     
  3. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Можно вставить сразу так:
    Код (Javascript):
    1. var data = //твой уникальный id;
    2. var html = '<div id="'+data+'"></div>';
    3. document.getElementById('test').innerHTML = html;   //test это родитель куда вставится этот блок
    И если у тебя создается сразу много div то делать это в цикле и на сервере.
     
  4. AlexsaiL

    AlexsaiL Активный пользователь

    С нами с:
    23 дек 2016
    Сообщения:
    327
    Симпатии:
    23
    Я пытаюсь реализовать механизм, где к примеру по клику на кнопку появляется список <select> по событию onchange передаю выбранные параметры в функцию js, далее отправляю данные на сервер, получаю следующий список данных, возвращаю в success, после использую шаблоны template(js)
    Код (Javascript):
    1. <script type="text/template" id="grid-child">
    2.     <select name="item_objects" id="list_objects" onchange="javascript:fields_object(<%=id%>,<%=val%>);">
    3.         <% for(var i = 0; i < list.length; i++) { %>
    4.         <option value="<%=list[i].ID%>"><%=list[i].item%></option>
    5.         <% } %>
    6.     </select>
    7. </script>
    чтобы прокрутить в цикле получить данные и подставить значение в тег <option> списка <select> в этом же теге снова передаю данные с помощью onchange той же функции js, где она должна так же отправить данные на сервер, получить ответ и создать следующий DOM элемент с другим id и вывести следом за предыдущим в родительском элементе...
     
  5. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Хз что мудрите как то, вот html например:
    HTML:
    1.  
    2. <select id="list_objects"></select>
    3. <button onclick ="getSelectOption"></button>
    4.  
    дом элементы создаете на сервере, не зачем клиенту напрягаться:
    но если все таки использовать для этого js:
    Код (Javascript):
    1. function getSelectOption(){
    2.        var list = //получили ваш список
    3.        var option = "";
    4.        for(var i =0; i < list.length; i++){
    5.            option +=  '<option value="'+list[i].ID+'">'+ist[i].item+'</option>';
    6.        }
    7.       document.getElementById('list_objects').innerHTML= option;
    8. }