原生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);
	};
};

效果图
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值