使用javascript动态创建嵌套div

时间:2018-04-16 23:39:04

标签: javascript nested

初学者,请耐心等待。我正在尝试编写一个代码,在单击按钮时动态创建嵌套div。它根本没有成功。我知道问题出在views对象中,但我不太确定bug是什么。我已经尝试了所有我能想到的。谢谢!

var views = { 
    displayCodo: function(){
        var codosUl = document.querySelector("div");
        codosUl.innerHTML = "";
        function iterObj(obj){
             var codoDiv = document.createElement("div");
        for (var key in obj){ 
             codosUl.appendChild(codoDiv);
            if(key === "codoText"){
                var codoTextWithCompletion="";
                codoTextWithCompletion = obj[key];
                codoDiv.textContent = codoTextWithCompletion;
                codoDiv.appendChild(views.createAddButton());
            }
            var nestedDiv = document.createElement("div");
            codoDiv.append(nestedDiv)
            codoDiv = nestedDiv;  
            if (obj[key] !== null && typeof obj[key] === "object") {
      // Recurse into children
                iterObj(obj[key]);

            } 

        }
    }
        iterObj(codoList.codos)
},
createAddButton: function(){
    var addButton = document.createElement("button");
    addButton.textContent = "add";
    addButton.className = "addButton";
    return addButton;
},
createInputElement: function(position){
    var inputElement = document.getElementById("createInputElement");
    codoList.addCodo(position, inputElement.value);
    inputElement.value ="";
    views.displayCodo()
},
createSubmitButton: function(){
    var submitButton = document.createElement("button");
    submitButton.textContent = "submit";
    submitButton.className = "submitButton";
    return submitButton;
},
setUpEventListeners: function(){
    var codosUl = document.querySelector("div");
    codosUl.addEventListener("click", function(event){
        var elementClicked = event.target;
        if (elementClicked.className==="addButton"){
            elementClicked.insertAdjacentHTML("afterend", "<input id=createInputElement type=text>")
            elementClicked.insertAdjacentElement("afterend", views.createSubmitButton());
        }
        else if (elementClicked.className === "submitButton"){
            views.createInputElement(eval("codoList." + (findPropPath(codoList,elementClicked.parentElement.firstChild.data))))
        }
    })
}
};    

views.setUpEventListeners()

https://jsfiddle.net/o9h5c9k3/37/

0 个答案:

没有答案