Как добавить элемент img с помощью javascript?

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

идентификаторы должны быть уникальными. Вы создаете новые элементы с тем же идентификатором, что и на странице, поэтому, когда вы делаете .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;