如何使用 JavaScript 动态创建 HTML 标签（带有内容）？

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);

希望有人可以填补有关使用 javascript 复制此 HTML 代码的空白。提前致谢！

编辑：

我正在尝试创建一个这样的下拉菜单： 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);

如果我在查询函数中使用第一个 for 循环中的 I，它会给我未定义的结果。

Answer 1

这里是你如何使用 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>，但也可以是别的东西。

编码愉快！

Answer 2

主要是你只是在乱做事。

1. 使用其类创建.dropdown <div>。
2. 填写.dropbtn <button> 及其类和文本。
3. 将按钮添加到 div。
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>