使用JavaScript將其添加到嵌套在另一個div中的div中

Question

在引導程序之外使用模板，但我不知道如何添加到其嵌套列表中。

我能夠將一個類添加到列表項並將其附加到無序列表，但是該類還有其他組件，我不確定該如何解決。

<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);

我想要它，以便列表內容來自服務器發送回的我的數據。 我如何追加到此列表，以將名稱更改為我想要的名稱以及預覽？ 它是contacts.contact.wrap.meta.name =“ foo”嗎？

Answer 1

.querySelector可以附加到任何元素，而不僅僅是document 。 因此，只需將其附加到所需的任何元素即可，例如：

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

Answer 2

你不能只是做：

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