如何使用 javascript 添加 img 元素？

Question

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

1. 每当我再次单击发布时，它都会在前一个元素中创建一个新文章元素。
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") 时，它始终会选择找到的第一个元素。

与其创建和附加元素，然后选择添加其内容，不如立即添加内容。

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

不确定img 没有固定的src 是什么意思，但您可以轻松地给它任何您想要的值。

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;