개요
코드
<script>
// HTML 코드가 완전히 로드된 후 실행되도록 이벤트 리스너를 등록합니다.
document.addEventListener("DOMContentLoaded", function() {
// div#w20240312d228a02114f14 요소를 선택합니다.
var originalDiv = document.querySelector("div#wdgid12345");
// div#w20240312d228a02114f14의 HTML 내용을 가져옵니다.
var originalHTML = originalDiv.innerHTML;
// depth-1 클래스를 가진 li 요소들을 선택합니다.
var depthOneElements = document.querySelectorAll(".viewport-nav.mobile._menu_wrap");
// 각 li 요소에 대해 작업합니다.
depthOneElements.forEach(function(element) {
// li 요소의 마지막 자식 요소를 선택합니다.
var lastChild = element.lastElementChild;
// 새로운 HTML 코드를 생성합니다.
var newHTML = '<div class="sns-box"><a href="https://www.instagram.com/eondcom/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"> </i></a><a href="https://blog.naver.com" target="_blank"><i aria-hidden="true" class="ii ii-nblog"> </i></a><a href="https://www.youtube.com/" target="_blank"><i aria-hidden="true" class="ii ii-youtube"> </i></a><a href="https://www.tiktok.com/@studioolaa" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"> </i></a><a href="https://www.instagram.com/eond_com/" target="_blank"><i aria-hidden="true" class="ii ii-instagram-rn"> </i></a></div>';
// 가져온 HTML 내용을 newHTML 변수에 담습니다.
//var newHTML = originalHTML;
// 올라 인스타 / 블로그 / 올라유튜브 / 틱톡 / 대표님인스타
// 새로운 HTML 코드를 마지막 자식 요소 뒤에 추가합니다.
lastChild.insertAdjacentHTML('afterend', newHTML);
});
});
//console.log('header');
</script>
<style>
.sns-box{
display:flex;display: flex;
align-items: center;
gap: 5px;
margin: 10px;
margin-top:150px;
}
.sns-box a{
display:flex;display: flex;
align-items: center;
justify-content:center;
width:24px;height:24px;
}
</style>
정리