如何使用JavaScript创建包含子项的可单击div列表

我想使用Javascript从数组中创建一个可单击div列表，其中列表结构必须如下所示：-

<div id="outerContainer">
  <div id="listContainer">

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

  </div>
</div>

我想分别从三个数组itemIdData[]、itemTitleData[]和itemStatusData[]中提取itemId、itemTitle和itemStatus的值，以创建整个列表

---

此外，当我单击任何列表元素时，我希望看到一个显示itemId的警报。有人能帮我解决这个问题吗。

尝试过类似的方法，但效果不太好

var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";

for (var i = 0; i < json.length; i++) {

            var itemId = document.createElement("div");
            itemId.innerHTML = idData[i];
            listElement.appendChild(itemId);
            itemId.className = "itemId";

            var itemTitle = document.createElement("div");
            itemTitle.innerHTML = titleData[i];
            listElement.appendChild(itemTitle);
            itemTitle.className = "itemTitle";

            var itemStatus = document.createElement("div");
            itemStatus.innerHTML = statusData[i];
            listElement.appendChild(itemStatus);
            itemStatus.className = "itemStatus";

            listElement.appendChild(document.createElement("hr"));

            var elementId = 'ListElement'+i;
            listElement.id = elementId;

            listElement.addEventListener("click", function(){
                alert(document.getElementById(elementId).innerHTML);
            });
}

var listContainer=document.createElement（“div”）；
document.getElementById（“outerContainer”）.appendChild（listContainer）；
var listeElement=document.createElement（“div”）；
appendChild（listElement）；
listElement.className=“listItemContainer”；
for（var i=0；i

尝试了类似的方法，但效果不佳

var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";

for (var i = 0; i < json.length; i++) {

            var itemId = document.createElement("div");
            itemId.innerHTML = idData[i];
            listElement.appendChild(itemId);
            itemId.className = "itemId";

            var itemTitle = document.createElement("div");
            itemTitle.innerHTML = titleData[i];
            listElement.appendChild(itemTitle);
            itemTitle.className = "itemTitle";

            var itemStatus = document.createElement("div");
            itemStatus.innerHTML = statusData[i];
            listElement.appendChild(itemStatus);
            itemStatus.className = "itemStatus";

            listElement.appendChild(document.createElement("hr"));

            var elementId = 'ListElement'+i;
            listElement.id = elementId;

            listElement.addEventListener("click", function(){
                alert(document.getElementById(elementId).innerHTML);
            });
}

var listContainer=document.createElement（“div”）；
document.getElementById（“outerContainer”）.appendChild（listContainer）；
var listeElement=document.createElement（“div”）；
appendChild（listElement）；
listElement.className=“listItemContainer”；
for（var i=0；i

如果您正在使用jQuery，请尝试以下操作：

$("#listContainer").on("click", "div", function () {
    console.log("jQuery Event Delegation");
    alert($(this).find(">:first-child").attr("id"));
});

在没有jQuery的情况下也可以编写同样的东西，但是需要更多的代码行——我在这里传达委托的想法（jQuery站点上和这个站点上都有大量的现有文档和示例）

---

注意：您在问题中提交的代码不能（不应该）有多个具有相同ID的DOM元素（这就是类的用途——对于语义相似的元素）。此外，尝试使用

div

s而不是

li

元素来模拟列表可能不是最佳做法。

如果您使用的是jQuery，请尝试以下操作：

$("#listContainer").on("click", "div", function () {
    console.log("jQuery Event Delegation");
    alert($(this).find(">:first-child").attr("id"));
});

在没有jQuery的情况下也可以编写同样的东西，但是需要更多的代码行——我在这里传达委托的想法（jQuery站点上和这个站点上都有大量的现有文档和示例）

---

注意：您在问题中提交的代码不能（不应该）有多个具有相同ID的DOM元素（这就是类的用途——对于语义相似的元素）。此外，尝试使用

div

s而不是

li

元素来模拟列表可能不是最佳做法。

经过一点实验，了解了我做错了什么，以及如何做到这一点。 代码如下：-

    var listContainer = document.createElement("div");
    document.getElementById("outerContainer").appendChild(listContainer);

    for (var i = 0; i < json.length; i++) {

        //create the element container and attach it to listContainer.
        var listElement = document.createElement("div");
        listElement.id = i;
        listElement.className = "listItemContainer";
        listElement.addEventListener("click", function(e){
            var itemId = e.target.children[1].innerHTML;
            alert(itemId);
        });
        listContainer.appendChild(listElement);

        //create and attach the subchilds for listElement.

        var itemTitle = document.createElement("span");
        itemTitle.innerHTML = postTitleData[i];
        itemTitle.id = 'title'+i;
        itemTitle.className = "itemTitle";
        listElement.appendChild(itemTitle);

        var itemId = document.createElement("div");
        itemId.innerHTML = postIdData[i];
        itemId.id = 'id'+i;
        itemId.className = "itemId";
        listElement.appendChild(itemId);

        var itemStatus = document.createElement("span");
        itemStatus.innerHTML = postStatusData[i];
        itemStatus.id = 'status'+i;
        itemStatus.className = "itemStatus";
        listElement.appendChild(itemStatus);
    }

var listContainer=document.createElement（“div”）；
document.getElementById（“outerContainer”）.appendChild（listContainer）；
for（var i=0；i

经过一点实验，我明白了我做错了什么，以及如何去做。 代码如下：-

    var listContainer = document.createElement("div");
    document.getElementById("outerContainer").appendChild(listContainer);

    for (var i = 0; i < json.length; i++) {

        //create the element container and attach it to listContainer.
        var listElement = document.createElement("div");
        listElement.id = i;
        listElement.className = "listItemContainer";
        listElement.addEventListener("click", function(e){
            var itemId = e.target.children[1].innerHTML;
            alert(itemId);
        });
        listContainer.appendChild(listElement);

        //create and attach the subchilds for listElement.

        var itemTitle = document.createElement("span");
        itemTitle.innerHTML = postTitleData[i];
        itemTitle.id = 'title'+i;
        itemTitle.className = "itemTitle";
        listElement.appendChild(itemTitle);

        var itemId = document.createElement("div");
        itemId.innerHTML = postIdData[i];
        itemId.id = 'id'+i;
        itemId.className = "itemId";
        listElement.appendChild(itemId);

        var itemStatus = document.createElement("span");
        itemStatus.innerHTML = postStatusData[i];
        itemStatus.id = 'status'+i;
        itemStatus.className = "itemStatus";
        listElement.appendChild(itemStatus);
    }

var listContainer=document.createElement（“div”）；
document.getElementById（“outerContainer”）.appendChild（listContaine