Как создавать HTML-теги (с контентом) на лету с помощью JavaScript?

Question

Я пытаюсь преобразовать этот HTML-код, который будет сгенерирован Javascript на лету для живых данных.

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Я нашел несколько методов, таких как: appendChild, getElementById, innerHTML и так далее.Вот что я пробовал до сих пор.Кажется, я не могу получить данные для показа.

                               stringy = data2.Items[0].groupName.values[i];
                               var para = document.createElement("div");
                               var node = document.createTextNode(stringy);
                               para.appendChild(node);
                               var element = document.getElementById("parental");
                               element.appendChild(para);

                               //create div and give it a class
                                para.setAttribute('class', 'dropbtn');
                                var div = document.createElement("div");
                                div.setAttribute('class', 'dropdown-content');
                                para.parentNode.insertBefore(div, para.nextSibling);
                    //create link tags and give them text
                                var alinky = document.createElement("a");
                                alinky.setAttribute('id', 'linky');
                                document.getElementById('linky').innerHTML = "linky poo"
                                div.appendChild(alinky);

Надеюсь, кто-то может заполнить пробелы при получении этого HTML-кода, который будет воспроизведен с помощью JavaScript.Заранее спасибо!

РЕДАКТИРОВАТЬ:

Я пытаюсь создать раскрывающееся меню, как это: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Однако я пытаюсь создать несколько раскрывающихся меню, которыединамическое изменение количества на основе запроса к DynamoDB (AWS).поэтому я использую javascript для создания тегов html.

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

Например, если я попытаюсь получить описание кнопки из запроса и записать в него descriptionArray[0] = data2.Items[0].description;, чтобы я мог добавить кнопку в выпадающий элемент div, он не знает, на какой итерации я нахожусь вцикл for из-за объема.В этом примере descriptionArray[0] будет работать, но descriptionArray[i] не будет работать, потому что цикл for находится вне запроса.

Вот вся логика:

                        //group data   
                        var length =  data2.Items[0].groupName.values.length;
                        // create elements
                        const dpdown1 = document.createElement('div');
                        // set dpdown1 class
                        dpdown1.setAttribute('class', 'dropdown');
                        console.log(dpdown1); 

                        var button = new Array();
                        var dpdown2 = new Array();   
                        var membersArray = new Array();
                        var descriptionArray = new Array(); 
                        var linksArray = new Array();
                        var stringy = new Array; 

                            //list groups
                            for(i = 0; i<length; i++){
                                // create button, set button attribs
                                button[i] = document.createElement('button');
                                button[i].setAttribute('class','dropbtn');
                                //create dropdown div, set attributes
                                dpdown2[i] = document.createElement('div');
                                dpdown2[i].setAttribute('class', 'dropdown-content');

                                //list of group names
                                stringy[i] = data2.Items[0].groupName.values[i];
                                var stringyy = stringy[i];
                                var desc;
                                //query group members and description                        
                                var docClient1 = new AWS.DynamoDB.DocumentClient({ region: AWS.config.region });
                                var identityId = AWS.config.credentials.identityId;
                                var paramsyy = {
                                    ExpressionAttributeValues: {
                                        ":v1": stringyy
                                    },
                                    KeyConditionExpression: "groupName = :v1",
                                    TableName: "group"
                                };
                                docClient1.query(paramsyy, function(err, data2) {
                                    if (err) {
                                        console.error(err);
                                    }else{

                                        descriptionArray[0] = data2.Items[0].description;
                                        //traverse members
                                        for(k = 0; k<data2.Items[0].members.values.length; k++){
                                          // create dropdown links of members
                                          membersArray[k] = data2.Items[0].members.values[k];
                                          linksArray[k] = document.createElement('a');
                                          linksArray[k].setAttribute('href', '#')
                                          linksArray[k].innerText = membersArray[k];

                                          // nest into dpdown2 div, set dpdown2 attribs
                                          dpdown2[0].appendChild(linksArray[k]);

                                        }     
                                    }          
                                });

                                button[i].innerText = stringyy + ": " + descriptionArray[0];

                                // nest into dpdown1
                                dpdown1.appendChild(button[i]);
                                dpdown1.appendChild(dpdown2[i]);
                            }
                            // append to DOM
                            const target = document.getElementById('target');
                            target.appendChild(dpdown1);

, если я используюI с первого цикла for внутри функции запроса, он даст мне неопределенные результаты.

Answer 1

В основном вы просто делаете вещи не по порядку.

1. Создайте .dropdown <div> с его классом.
2. Заполните .dropbtn <button> его классом и текстом.
3. Добавьте кнопку в раздел
4. Создать .dropdown-content <div>.
5. Заполните каждую ссылку атрибутом href и текстом.
6. Добавьте каждую ссылку на .dropdown-content <div>.
7. Добавьте .dropdown-content div к .dropdown <div>.
8. Найдите родительский элемент в документе.
9. Добавить весь документ .dropdown <div> к документу.

var para = document.createElement("div"); //make .dropdown div
para.setAttribute('class', 'dropdown'); //add .dropdown class to div
var button = document.createElement("button"); //create button
button.setAttribute('class', 'dropbtn'); //add .dropbtn class to button
var node = document.createTextNode('Dropdown'); //create button text
button.appendChild(node); //add text to button
para.appendChild(button); //add button to .dropdown div

var div = document.createElement("div"); //create .dropdown-content div
div.setAttribute('class', 'dropdown-content'); //add .dropdown-content class to div

//repeat for all necessary links
var alinky = document.createElement("a"); //creat link
alinky.setAttribute('href', '#'); //set link href attribute
var alinkyText = document.createTextNode("Link 1"); //create text for link
alinky.appendChild(alinkyText); //add text to link
div.appendChild(alinky); //add link to dropdown div

para.appendChild(div); //add .dropdown-content div to .dropdown div

var element = document.getElementById("parental"); //find parent element
element.parentNode.insertBefore(para, element.nextSibling); //add .dropdown div to the bottom of the parent element

<div id="parental">

</div>

Answer 2

вот как вы можете сделать это с помощью vanilla JavaScipt, есть несколько способов сделать это, но этот способ использует только 4 метода: createElement, setAttribute, appendChild и getElementById, и непосредственно устанавливает 1 свойство: innerText.

// create elements
const dpdown1 = document.createElement('div');
const button = document.createElement('button');
const dpdown2 = document.createElement('div');
const link1 = document.createElement('a');
const link2 = document.createElement('a');
const link3 = document.createElement('a');

// set link attribs
link1.setAttribute('href', '#')
link1.innerText = 'Link 1';
link2.setAttribute('href', '#')
link2.innerText = 'Link 2';
link3.setAttribute('href', '#')
link3.innerText = 'Link 3';

// nest into dpdown2, set dpdown2 attribs
dpdown2.appendChild(link1);
dpdown2.appendChild(link2);
dpdown2.appendChild(link3);
dpdown2.setAttribute('class', 'dropdown-content');

// set button attribs
button.setAttribute('class','dropbtn');
button.innerText = "Dropdown"

// nest into dpdown1
dpdown1.appendChild(button);
dpdown1.appendChild(dpdown2);

// set dpdown1 class
dpdown1.setAttribute('class', 'dropdown');

// append to DOM
const target = document.getElementById('target');
target.appendChild(dpdown1);

<div id="target"></div>

Вы хотите добавить это к чему-либо, в этом примере это <div id="target"></div>, но это может быть что-то еще.

Удачного кодирования!