Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML afterend trong JavaScript</title>
</head>
<body>
<div id="divid">
	<pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
</div>
<script>
// Lấy nút phần tử id divid
const divid = document.getElementById('divid');
if(divid){
// Lấy danh sách phần tử HTML pre trong phần tử id divid
const pres = divid.getElementsByTagName('pre');
// Lặp qua từng phần tử HTML pre trong phần tử id divid
for (let i = 0; i < pres.length; i++) {
// Tạo phần tử HTML p, có class, title, thẻ span bên trong
const noiDungHtml = "<p class='copyc'><span title='Click để Copy' class='copycs' id='scopy"+i+"'  data-id='"+i+"'"+">Copy</span></p>";
// Lấy thẻ pre cần thêm
const prett = divid.getElementsByTagName("pre")[i];
if(prett){
    // Thêm thẻ p vào phía sau thẻ pre trong phần tử id divid
	prett.insertAdjacentHTML('afterend', noiDungHtml);
}
// Thêm thuộc tính id cho pre
divid.getElementsByTagName("pre")[i].setAttribute("id", "pre"+i);		  
		  
}

}
</script>
</body>
</html>

Phương thức insertAdjacentHTML afterend trong JavaScript nằm trong bài viết Phương thức insertAdjacentHTML trong JavaScript