原生js在最后一个子元素插入html内容

<div id="chat_msg_list" class="chat-message chat_msg_list"> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b1f">11</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b2f">22</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b3f">33</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b4f">44</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b5f">55</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b6f">66</div> <div class="clearfix chat-block" id="d0073000-1b58-4bfd-bb05-76c00e0f8b7f">77</div> </div> .lineWrap{ width: 600px; height: 18px; line-height: 18px; color: #BCBCBC; font-size: 14px; margin: auto; display: flex; justify-content: center; align-items: center; } .line{ flex: 1; width: 100%; height: 1px; background-color: #bcbcbc; } .msg{ flex: 1; text-align: center; } let id = null; var a = document.getElementById("chat_msg_list").getElementsByTagName("div"); id = a[a.length - 1].id;//获取最后一个子元素的id var lastNode = document.getElementById(id); var insertDiv = document.createElement("div"); // 创建要插入的元素节点 //给要插入的元素设置内容 insertDiv.className = "lineWrap"; var lineP1 = document.createElement('p'); var lineP2 = document.createElement('p'); lineP1.className = 'line' lineP2.className = 'line' var msgP = document.createElement('p'); msgP.className = 'msg' msgP.innerText = '以下是最新消息' insertDiv.appendChild(lineP1) insertDiv.appendChild(msgP) insertDiv.appendChild(lineP2) insertAfter(insertDiv, lastNode); function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement, targetElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); }; };

效果图