javascript - 相当于 jQuery last() 的 vanilla 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>