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

最新推荐文章于 2023-08-22 14:49:56 发布

清黎浅帆

最新推荐文章于 2023-08-22 14:49:56 发布

阅读量1.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/pipidan_/article/details/109222372

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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