Javascript 如何向DOM添加元素

Javascript 如何向DOM添加元素,javascript,dom,Javascript,Dom,我需要一个函数来创建元素,然后将文本添加到该元素,然后将新元素添加到DOM中的某个位置。我对此一无所知。 我找到了这个函数,但我不知道如何自动指定位置,这样我就可以调用这个函数,例如,指定第三个参数作为我想要附加新元素的元素 function appendElement (elemNode,textNode) { var element = document.createElement(elemNode); var text = document.

我需要一个函数来创建元素,然后将文本添加到该元素,然后将新元素添加到DOM中的某个位置。我对此一无所知。 我找到了这个函数,但我不知道如何自动指定位置,这样我就可以调用这个函数,例如,指定第三个参数作为我想要附加新元素的元素

function appendElement (elemNode,textNode) {
            var element = document.createElement(elemNode);
            var text = document.createTextNode(textNode);
            element.appendChild(text);
            document.body.appendChild(element);
}
appendElement("b","lorem");

这是我的尝试。完全从developer.Mozilla.org上剽窃,只需稍加修改

Javascript:

function addElement() {
    // Create a new div element  and give it some content 
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hi there and greetings!");
    newDiv.appendChild(newContent); //Add the text node to the newly created div. 

    // Add the newly created element and its content into the Parent of the clicked button
    var parentDiv = event.target.parentNode;
    document.body.insertBefore(newDiv, parentDiv);
}
HTML


这里有一种方法可以在一行中完成:

函数appendElement(elemNode,textContent,parent){
parent.appendChild(document.createElement(elemNode)).textContent=textContent;
}
appendElement(“b”,“lorem”,document.getElementById(“container”)
div{背景色:浅绿色}

document.body
更改为要将其附加到的容器中。是的,但我需要在几个位置使用此文件。如何指定要添加元素的位置。类似于这个元素(“b”、“lorem”、“body”);附录元素(“b”、“lorem”、“div”);附录元素(“b”、“lorem”、“span”);
function addElement() {
    // Create a new div element  and give it some content 
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hi there and greetings!");
    newDiv.appendChild(newContent); //Add the text node to the newly created div. 

    // Add the newly created element and its content into the Parent of the clicked button
    var parentDiv = event.target.parentNode;
    document.body.insertBefore(newDiv, parentDiv);
}
<div id="div1">
    <input type="button" onclick="addElement(event)" value="Click me to add div" />
</div>
<div id="div2">
    <input type="button" onclick="addElement(event)" value="Click me to add div" />
</div>
<div id="div3">
    <input type="button" onclick="addElement(event)" value="Click me to add div" />
</div>
function appendElement (elemNode,textNode,containerToAppend) {
    var container = document.getElementById(containerToAppend);
    var element = document.createElement(elemNode);
    var text = document.createTextNode(textNode);
    element.appendChild(text);
    container.appendChild(element);
}
appendElement("p","this is text","ContainerId");