Create a <p> tag dynamically

The simplest solution is to use the insertAdjacentHTML method which is very convenient for manipulations with HTML strings:

function addParagraphs() {
    var p2 = "<p>paragraph 2</p>";
    document.getElementById("p3").insertAdjacentHTML('beforebegin', p2);
}
<p id="p1">paragraph 1</p>
<p id="p3">paragraph 3</p>
<p id="p4">paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2' />

Another option is to use the insertBefore method, but it's a bit more verbose:

function addParagraphs() {
    var p2 = document.createElement('p');
    p2.innerHTML = 'paragraph 2';
    var p3 = document.getElementById("p3");
    p3.parentNode.insertBefore(p2, p3);
}
<p id="p1">paragraph 1</p>
<p id="p3">paragraph 3</p>
<p id="p4">paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2' />

You have a typo. It's getElementById, not getElementsById. Only one single element can be gotten with a certain ID.

And you should be using createElement and insertBefore to insert the element between the two other elements, appendChild appends to the element.

function addParagraphs() {

    var p2 = document.createElement('p');

    p2.innerHTML = "paragraph 2";

    var elem = document.getElementById("p1");

    elem.parentNode.insertBefore(p2, elem.nextSibling);

}
<p id ="p1" > paragraph 1</p>
<p id ="p3" > paragraph 3</p>
<p id ="p4" > paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2'/>

A simple jQuery solution would be to use .insertAfter:

function addParagraphs() {
    var p2 = "<p>paragraph 2</p>";
    $(p2).insertAfter("#p1");
}

JSFiddle


<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<html>
    <body>
        <script>
            function addParagraphs()
            {
                var para = document.createElement("p");
                var node = document.createTextNode("paragraph 2");
                para.appendChild(node);
                var element = document.getElementById("p2");
                element.appendChild(para);
            }
        </script>

        <p id="p1"> paragraph 1</p>
        <p id="p2"> </p>
        <p id="p3"> paragraph 3</p>
        <p id="p4"> paragraph 4</p>
        <input id="b2" type='button' onclick='addParagraphs()' value='Add P2'/>
    </body>
</html>

Tags:

Javascript

Html

Dom

Recent Posts