如何使用javascript添加img元素？

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

每当我再次单击post，它就会在前一个元素中创建一个新的article元素

我需要创建的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>

document.getElementById（“post按钮”）.onclick=createPost；
var el=document.getElementById（“post按钮”）；
如果（el.addEventListener）
el.addEventListener（“单击”，createPost（），false）；
否则，如果（见附件）
el.attachEvent（'onclick'，createPost（））；
函数createPost（）{
var article=document.createElement（“article”）；
条款.setAttribute（“id”、“myarticle”）；
article.className=“posts”；
var p=document.createElement（“p”）；
//p、 setAttribute（“id”、“后内容”）；
p、 innerHTML=document.getElementById（“过账区域”）.value；
var img=document.createElement（“img”）；
//img.setAttribute=（“src”，document.getElementById（“profilePic”）；
//img.innerHTML=document.getElementById（“profilePic”）；
img.getAttribute（“src”）；
img.className=“peopletofollowimg”；
//测试用例，附加内容
文件.正文.附件（第条）；
document.getElementById（“myarticle”）.appendChild（p）；
document.getElementById（“myarticle”）.appendChild（img）；
}

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;

---

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;

---

addEventListener

和

attachEvent

的参数必须是

createPost

，而不是

createPost（）

img.getAttribute（“src”）不起任何作用。它返回源代码，但不做任何处理。

addEventListener

和

attachEvent

的参数必须是

createPost

，而不是

createPost（）

img.getAttribute（“src”）

不做任何事情。它返回源代码，但不做任何处理。我不知道怎么做，有什么想法吗？我的意思是，比如在facebook上，当你发布某个东西时，该帖子旁边有你的个人资料图片。我的代码应该从数据库中获取用户的配置文件图片。我是不是走错了路？很抱歉弄得一团糟我还是个孩子beginner@Noha：那是一个更大的话题。您可能需要一些服务器端技术来动态创建页面或将其放入cookie或其他东西中。您也可以在JavaScript中执行此操作，但首先仍然需要有一个源代码来获取。一旦设置好了，你就可以使用和XHR请求来获取数据。我不知道怎么做，有什么想法吗？我的意思是，比如在facebook上，当你发布一些东西时，你的个人资料图片就在旁边。我的代码应该从数据库中获取用户的配置文件图片。我是不是走错了路？很抱歉弄得一团糟我还是个孩子beginner@Noha：那是一个更大的话题。您可能需要一些服务器端技术来动态创建页面或将其放入cookie或其他东西中。您也可以在JavaScript中执行此操作，但首先仍然需要有一个源代码来获取。设置好后，您可以使用和XHR请求来获取数据。