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:

Whenever I click post again, it creates a new article element inside the previous one.
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>

The argument to addEventListener and attachEvent must be createPost, not createPost(). — Barmar
– Barmar, Commented Dec 24, 2015 at 20:06
img.getAttribute("src") doesn't do anything. It returns the source, but doesn't do anything with it. — Barmar
– Barmar, Commented Dec 24, 2015 at 20:07

3 revs user1106925 · Accepted Answer · 2015-12-24 20:14:10Z

4

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;

edited Dec 24, 2015 at 20:14

community wiki

3 revs
user1106925

Sign up to request clarification or add additional context in comments.

3 Comments

Noha Over a year ago

I don't know how to do that, any ideas?

Noha Over a year ago

I meant like for example on facebook, when you post something, that post has your profile picture next to it. My code should get the user's profile picture from the database. Am I acheiving it the wrong way? Sorry for the mess I am still a beginner

user1106925 Over a year ago

@Noha: That's a much bigger topic. You probably are wanting some server-side technology to dynamically create the page or to put it in a cookie or something. You can do it in JavaScript as well but you'll first still need to have a source to fetch from. Once that is set up, you can use and XHR request to fetch the data.

Collectives™ on Stack Overflow

How can I add an img element using javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related