javascript - 如何将 div 附加到容器

Question

我最近用 HTML 和 Javascript 实现了一个聊天室。

当我单击“发送”按钮时，我不知道如何将消息(class="chat self")附加到“聊天容器”。

这是代码:

    <div id = "chat-container" class="chat-container">
        <div class="chat friend">
            <div class="user-photo"><img src="images/james.jpg"></div>
            <p class="chat-message">How are you?</p>                
        </div>
        <div class="chat self">
            <div class="user-photo"><img src="images/curry.jpg"></div>
            <p class="chat-message">Fine, thx!</p>              
        </div>
        <div class="chat friend">
            <div class="user-photo"><img src="images/james.jpg"></div>
            <p class="chat-message">How old are you?</p>            
        </div>
    </div>

    <div class="chat-form">
        <textarea id="myTextarea" placeholder="Type your message"></textarea>
        <button onclick="sendMes()">Send</button>
    </div>

我的想法是这样的:

<script>
    function sendMes() {
        var x = document.getElementById("myTextarea").value;
        document.getElementById("demo").innerHTML = x;
        vara data = 
        '<div class="chat self">
            <div class="user-photo"><img src="images/curry.jpg"></d-wiv>
            <p class="chat-message">Fine, thx!</p>              
        </div>';
        data.chat-message = x;
        document.getElementById("chat-container").appendChild(data);

    }
</script>

我读过很多关于 HTML DOM 的文章，但它们只告诉我们如何更改 .innerHTML...

我不知道如何创建一个 class="chat self"的 div 对象，并将该对象的聊天消息设置为文本区域中的值。

非常感谢!

Answer 1

您只需向其中附加一个字符串(这似乎也是格式错误的)，而不是将 DOM 元素附加到 #chat-c​​ontainer

也许你应该结账W3School

sendMes() 的示例实现可能类似于

function sendMes() {
    var message = document.getElementById("myTextarea").value  // maybe try to sanitize it if you are sending it to server

    var messageEl = document.createElement('p')
    messageEl.innerHtml = message;
    messageel.className = "chat-message"

    var userImage = new Image()
    userImage.src = "images/curry.jpg"
    var imageContainer = document.createElement("div")
    imageContainer.appendChild(userImage)
    imageContainer.className = "user-photo"

    var container = document.createElement("div")
    container.appendChild(imageContainer)
    container.appendChild(messageEl)
    container.className = "chat self"

    document.getElementById("chat-container").appendChild(container)

}