Creating a series of Div and adding variable's value with javascript-CodePudding

I am building a chat room and need to add my chat message in a series of div via javascript. The div structure looks like this :

<div class="main-friend-chat" id="chat-log">
    <div class="media chat-messages">
        <div class="media-body chat-menu-content">
            <div class="">
                <p class="chat-cont">My message should go here! Will you tell me something</p>
                <p class="chat-cont">about yours?</p>
            </div>
        </div>
    </div>
 </div>

I need to add the text in the <p> tags. So far I manage to create only one div dynamically. When I try to build the second div i get and error Saying 'append' is not a function. My JS code looks like this:

const data = JSON.parse(e.data);
var newNode = document.createElement('div');
newNode.className = 'media chat-messages';
var newNode2 = document.createElement('div');
newNode2.className = 'media-body chat-menu-content';
newNode2.innerHTML = (data.message   "\n") ;
document.getElementsByClassName("newNode").appendChild(newNode2);
document.getElementById('chat-log').appendChild(newNode);

I would greatly appreciate is someone could teach me how to do this please ?

CodePudding user response：

One of your line says [2nd last line]

document.getElementsByClassName("newNode").appendChild(newNode2);

I could not see any such element with this class name "newNode" . Which means you're calling the append method on something that is undefined. I think this seems to be the issue, otherwise the code looks ok

CodePudding user response：

var newNode = document.querySelector('#chat-log')
var input = document.getElementById("chat-input");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    var htmlString = `  <div >
    <div >
      <div ><p >`
    htmlString  = event.target.value
    htmlString  = `   </p></div>
                          </div>
                            </div>`

    const placeholder = document.createElement('div');
    placeholder.innerHTML = htmlString;
    const node = placeholder.firstElementChild;
    newNode.appendChild(node)
    event.target.value = ''
  }
});

<input id="chat-input">

<div class="main-friend-chat" id="chat-log">
  <div class="media chat-messages">
    <div class="media-body chat-menu-content">
      <div class="newNode">
        <p class="chat-cont">My message should go here! Will you tell me something</p>
        <p class="chat-cont">about yours?</p>
      </div>
    </div>
  </div>
</div>