Adding to a div that is nested inside another div using Javascript

Question

Using a template off bootstrap but I have no idea how to add to their nested list.

I am able to add a class to the list item and append it to the unordered list, but that class has other components to it that I am unsure how to address.

<div id="contacts">
<ul>
 <li class="contact">
  <div class="wrap">
   <span class="contact-status online"></span>
    <img src="http://emilcarlsson.se/assets/louislitt.png" alt="">
     <div class="meta">
       <p class="name">Louis Litt</p>
       <p class="preview">You just got LITT up, Mike.</p>
    </div>
   </div>
  </li>
</ul>
</div>

  if (data.success) {
                const contents = `${data.chatroom}`
                // add the data to the list
                const li = document.createElement('li');
                li.classList.add('contact');
                li
                document.querySelector('#contacts').append(li);

I want it so that the list content is from my data that is sent back from the server. How do I go about appending to this list changing the name to what ever I want and as well as the preview? Is it contacts.contact.wrap.meta.name = "foo"?

Answer 1

.querySelector can be attached to any element, not just the document . So, just attach it to whatever element you want, eg:

document.querySelector('#parent-element-of-my-choice').querySelector('#contacts').append(li);

Answer 2

Couldn't you just do:

const name = document.querySelector('.name');
name.classList.add = "foo";