I need a function which creates element and than adds text to that element and than adds that new element to a some location in DOM. I am noob to this. I find this function but I don't know how to automaticaly specify location so that I can just call function and for example specify third argument as an element to which I want to append new element.

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

I need a function which creates element and than adds text to that element and than adds that new element to a some location in DOM. I am noob to this. I find this function but I don't know how to automaticaly specify location so that I can just call function and for example specify third argument as an element to which I want to append new element.

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

• javascript
• dom

Share Improve this question Follow asked Sep 22, 2014 at 6:41 MikeMike 5111 silver badge44 bronze badges 3

• 2 Change document.body to the container where you want to append it. – elclanrs Commented Sep 22, 2014 at 6:41
• 1 developer.mozilla/en-US/docs/Web/API/Node.appendChild – MarsOne Commented Sep 22, 2014 at 6:43
• yes, but I need this on a few locations. How can I specify location where I want to add element. Something like this appendElement("b","lorem","body"); appendElement("b","lorem","div"); appendElement("b","lorem","span"); – Mike Commented Sep 22, 2014 at 6:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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("b","lorem","ContainerId");

Here's a way to do it in one line:

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>

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

Here is my attempt. Completely ripped off from developer.Mozilla with a minor tweak.

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>