コンテナにdivを追加する方法

Question

最近、HTMLとJavascriptでチャットルームを実装しました。

私は、「送信」ボタンをクリックすると、「コンテナチャット」へのメッセージ（クラス=「チャット自己」）を追加する方法がわかりません。私の考えは、このようなものです

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

私は、クラス=「チャット自己」とのdivオブジェクトを作成する方法を知っている、とテキストエリアの値にオブジェクトのチャット・メッセージを設定しないでください。

ありがとうございます！代わりに、あなたは、単にそれに文字列を追加している#chat-containerにDOM要素を追加する

Answer 1

たぶん

あなたは可能性がありW3School

sendMes()のサンプル実装をチェックアウトする必要があり（とあまりにもことは、不正な形式のようです） IDにスペースがある理由

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) 

}