如何將div附加到容器

Question

我最近通過HTML和Javascript實現了一個聊天室。

當我單擊“發送”按鈕時，我不知道如何將消息（class =“ chat self”）附加到“ chat-c​​ontainer”上。

這是代碼：

    <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對象，並將該對象的chat-message設置為textarea中的值。

非常感謝！

Answer 1

而不是將DOM元素附加到#chat-container ，而只是將一個字符串附加到了它（而且看起來也不正確）

也許您應該結帳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)

}