javascript - 相当于 jQuery 的 last() 的普通 JS 不起作用

Question

我正在开发一个聊天应用程序，但我使用 jQuery 编写了它，并且想停止这样做。我必须用 vanilla JS 编写一些东西，除了一个持续存在的问题之外，它可以工作。我无法正确地将用户输入的输入附加到最后附加的 div 内。

来自输入的值被附加到一个 div 内，该 div 也被附加，但它始终是第一个 div。所有其他附加的 div 都会变成空。

var input;

function sendResponse() {

    input = document.getElementById("input").value;

    document.getElementById('window').innerHTML += '<div class="userMessageC"></div>';
    document.getElementsByClassName('userMessageC:last > div:nth-child(2)').innerHTML += input;
    document.getElementsByClassName('userMessage')[0].lastChild.innerHTML += input;

    outputResponse(input);
}

document.getElementsByClassName('userMessage')[0].lastChild.innerHTML += input 曾经是 $("userMessage:last").append(); 而 last() 也有效。我无法让它与 vanilla JS 一起工作，我不知道该选择哪个元素。 LastChild 或lastElementChild 不起作用。

Here's a jsfiddle to see what I mean

Answer 1

仅使用模板字符串插入变量。

我已经修改了您的 DOM 遍历以使其正常工作，尽管在本例中这是不必要的。

//globals 
var input;

function sendResponse() {

    input = document.getElementById("input").value;

    document.getElementById('window').innerHTML += `<div class="userMessageC"><div class="userIcon"></div><div class="userMessage"><div class="userTextBalloon"><span>${input}</span></div></div></div>`;
    
    // :last -> :last-child
    document.querySelector('.userMessageC:last-child > div:nth-child(2)').innerHTML += input;
    // .lastChild will give you the text node you just inserted
    document.getElementsByClassName('userMessage')[0].querySelector('div:last-child').innerHTML += input;
    outputResponse(input);
}

.window {
   float: left;
   width: 100%;
   margin-top: 20px;
   margin-bottom: 120px;
 }
 
 .userMessageC {
   float: left;
   width: 100%;
   position: relative;
   word-wrap: break-word;
 }
 .userMessage {
   float: left;
   font-size: 18px;
   line-height: normal;
   margin: 1% 0;
   background: black;
   padding: 1%;
   color: white;
 }
 .click {
   float: left;
   background: black;
   color: white;
   padding: 0.5%;
 }

<div id="window">
  <div class="typeBarContainer">
    <div class="typxeBarInnerContainer">

      <div class="typeBar">
        <input id="input" type="text" placeholder="Type here"/>
      </div>
      <div class="click" onclick="sendResponse();">
        Send
      </div>

    </div>
  </div>
</div>