如何使用JavaScript添加img元素？

Question

在我的网站上，用户有一个文本区域，他/她可以在其中输入帖子的文本或图像，然后单击a按钮。 单击的按钮链接到Java脚本函数，该函数动态创建一个文章元素，其中包含帖子内容以及用户名和个人资料图片。 我拥有的代码可以创建新的article元素，但是我面临两个问题：

1. 每当我再次单击发布时，它都会在前一个元素内创建一个新的article元素。
2. 我需要创建的img元素没有固定的src。

这是我这部分的HTML

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

这是我的js代码

<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

ID必须是唯一的。 您正在创建具有与页面上相同的ID的新元素，因此当您执行.getElementById("myarticle") ，它总是选择找到的第一个.getElementById("myarticle") 。

无需创建和附加元素，然后选择添加其内容，而只需立即添加内容。

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

不知道关于没有固定src的img意味着什么，但是您可以轻松地为其提供所需的任何值。

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

---

就像Barmar关于绑定处理程序所说的那样，您不应该调用该函数。 现在，您只绑定第一个。 如果您修复了调用，最终将其绑定两次。

改为这样做：

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;