javascript - 如何使用 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);

希望有人能够填补空白，让这段 HTML 代码能够用 javascript 重现。提前致谢!

编辑:

我正在尝试创建一个如下所示的下拉菜单: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

但是，我正在尝试创建多个下拉菜单，这些菜单的数量根据对 DynamoDB (AWS) 的查询动态变化。因此我使用 javascript 来创建 html 标签。

问题是查询函数的作用域不允许我看到查询函数之外的数据，甚至不允许向其中注入(inject)数据。

例如，如果我尝试从查询中获取按钮描述，并将其写入 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

这里是如何使用普通的 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>但也可能是别的东西。

祝你编码愉快!