如何向DOM添加元素

Question

我需要一个函数，它可以创建元素，然后添加文本到该元素中，最后将新元素添加到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");

- Mike

---

将 document.body 更改为您想要附加它的容器。 - elclanrs

https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild - MarsOne

是的，但我需要在几个位置添加元素。我该如何指定要添加元素的位置？类似这样：appendElement("b","lorem","body"); appendElement("b","lorem","div"); appendElement("b","lorem","span"); - Mike

Answer 1

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("b","lorem","ContainerId");

- Syed Arif Iqbal

Answer 2

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");

- user4284772

Answer 3

这是一种在一行中完成它的方法：

function appendElement (elemNode, textContent, parent) {
    parent.appendChild(document.createElement(elemNode)).textContent = textContent;
}

appendElement("b","lorem", document.getElementById("container"));

div { background-color: aqua }

<div id="container"></div>

- GOTO 0

Answer 4

这是我的尝试。完全抄袭自developer.Mozilla.org，稍作修改。 JSFIDDLE DEMO 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

<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>

- MarsOne