javascript - 使用 Javascript 动态创建两个 div

Question

我试图在一个函数中创建两个 div，但我不知道如何做到这一点。我已动态创建 div 并尝试在一个函数中创建两个 div。

感谢您的帮助。 :)

Answer 1

原生 JavaScript 中没有 insertAfter() 函数，以下是如何为各种相同的工作创建函数。

//create the passed element with id and class
function createElement(tag, id, className){
    var elem = document.createElement(tag);
    if(typeof id != 'undefined'){
        elem.id = id;
    }

    if(typeof className != 'undefined'){
        elem.className = className;
    }

    return elem;
}

//create div and submit tag with passed id and class
function createDivs() {
    var divTag = createElement('div', 'textarea', 'divdrag');
    var textAreaElm = createElement('textarea', 'myTextarea', 'textarea');
    divTag.appendChild(textAreaElm);
    par = document.getElementById('stage');
    insertAfter(par, divTag);

    createDiv(par, 'insertAfter');
    //put insertBefore--^---here when you need insertBefore to append
}

//create div and it's child button
function createDiv(par, where){
    var divTag = createElement('div', 'submit', 'divdrag');

    var btn = document.createElement("button");
    var t = document.createTextNode("Submit");
    btn.className = "btn";
    btn.appendChild(t);
    divTag.appendChild(btn);
    if(where == 'insertAfter'){
        insertAfter(par, divTag);
    }else if(where == 'insertBefore'){
        par.insertBefore(divTag, par.firstChild);
    }
}

//insertAfter function as there is no native support by js
function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

createDivs();

DEMO