How can I add an img element using javascript?

Question

In my website, the user has an a text area where he/she can enter text or images for a post then clicks the a button. The button clicked is linked to a java script function that dynamically creates an article element containing the post content and the username and profile picture. The code I have creates the new article element alright, but I am facing two problems:

1. Whenever I click post again, it creates a new article element inside the previous one.
2. I need the img element created to not have a fixed src.

Here is my html for this part

<article class="posts">
   <img  id = "profilePic" class="peopletofollowimg" src=Profile.jpg alt="View Profile Picture">
    <textarea id="posting-area" rows="6" cols="90" placeholder="Share Your Thoughts!"></textarea>



    <button onclick="createPost()" id="post-button">Post!</button>

</article>

<article id="myarticle" class="posts">

</article>

And here is my js code

<script>

document.getElementById("post-button").onclick = createPost;
var el = document.getElementById("post-button");
if (el.addEventListener)
    el.addEventListener("click", createPost(), false);
else if (el.attachEvent)
    el.attachEvent('onclick', createPost());

function createPost(){
    var article = document.createElement("article");
    article.setAttribute("id", "myarticle");
    article.className = "posts";

    var p = document.createElement("p");
    //p.setAttribute("id", "postContent");
    p.innerHTML = document.getElementById("posting-area").value;

    var img = document.createElement("img");
    //img.setAttribute=("src", document.getElementById("profilePic"));
    // img.innerHTML = document.getElementById("profilePic");
    img.getAttribute("src");
    img.className = "peopletofollowimg";

    // test case, append the content
    document.body.appendChild(article);
    document.getElementById("myarticle").appendChild(p);
    document.getElementById("myarticle").appendChild(img);

}
 </script>

Answer 1

IDs must be unique. You're creating new elements with the same ID as the one on the page, so when you do .getElementById("myarticle") , it always selects the first one it finds.

Instead of creating and appending the element and then selecting to add its content, just add the content immediately.

function createPost(){
    var article = document.createElement("article");
    article.className = "posts";

    var p = document.createElement("p");
    p.innerHTML = document.getElementById("posting-area").value;

    var img = document.createElement("img");
    img.className = "peopletofollowimg";

    article.appendChild(p);
    article.appendChild(img);

    document.body.appendChild(article);
}

Not sure what you meant about the img not having a fixed src , but you can easily give it any value you want.

img.src = "some/path/to/image.png";

---

Like Barmar said about binding the handlers, you shouldn't be invoking the function. Right now you're only binding the first. If you fix the invocation, you'll end up binding it twice.

Do this instead:

var el = document.getElementById("post-button");

if (el.addEventListener)
    el.addEventListener("click", createPost, false);
else if (el.attachEvent)
    el.attachEvent('onclick', createPost);
else
    el.onclick = createPost;