Question

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

每当我再次点击发布时，它会在上一个内容中创建一个新的文章元素。
我需要创建的img元素没有固定的src。

这是我这部分的html

products
  name:string
, product_type:fk
, required_selections:integer
, deliver_type:fk

selections_products
  product_id:fk
, selection_id:fk

selections
  selection_status_id:fk
, listing_id:fk

selection_status
  status:string

listing
 local_date:datetime

这是我的js代码

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

Answer 1

ID必须是唯一的。您正在使用与页面上的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;

如何使用javascript添加img元素？

1 个答案: