티스토리모바일웹 꾸미기 - 모바일 하단에 script로 링크 만들기

티스토리 / 로그아웃 / 고객센터

티스토리모바일웹 꾸미기, 오랜만에 돌아왔다. 이번엔 티스토리모바일웹 중에 위 이미지 부분에 script로 링크를 만들어줄 예정이다. 어떤 식이냐면 아래와 같이 해줄거다.

script로 링크 추가하기

링크를 왜 추가하냐고 할 수는 있겠지만, 이런 식으로도 활용이 가능하지 않을까 싶어서 작성해보았다. 뭐, 활용하지 못한다고 하면 말고 말이다.

li 하나만 추가할 때

하나만 추가할 때는 아래 스크립트를 사용하면 된다.

window.addEventListener('DOMContentLoaded', function() {
  var ul = document.querySelector('ul.list_etcinfo');
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.href = '주소';
  a.textContent = '호칭!';
  li.appendChild(a);
  ul.appendChild(li);
});

아래는 예시입니다. 저 같은 경우 티스토리유니온 사이트를 넣었고 직접 Tistroy Union이라고 작성했습니다.

window.addEventListener('DOMContentLoaded', function() {
  var ul = document.querySelector('ul.list_etcinfo');
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.href = 'https://tistory-union.tistory.com/';
  a.textContent = 'TISTORY UNION';
  li.appendChild(a);
  ul.appendChild(li);
});

결과는 아래와 같이 됩니다.

티스토리 유니온 추가된 모습

li 여러개 추가할 때!

window.addEventListener('DOMContentLoaded', function() {
  var ul = document.querySelector('ul.list_etcinfo');
  
  // 첫번째
  var li1 = document.createElement('li');
  var a1 = document.createElement('a');
  a1.href = '1번째 주소';
  a1.textContent = '1번째 페이지명';
  li1.appendChild(a1);
  
  // 두번째
  var li2 = document.createElement('li');
  var a2 = document.createElement('a');
  a2.href = '2번째 주소';
  a2.textContent = '2번째 페이지명';
  li2.appendChild(a2);
  
  // 추가한다는 내용
  ul.appendChild(li1);
  ul.appendChild(li2);
});

이런 식으로 사용하면 된다. 그러면 아래처럼 활용할 수 있다.

티스토리 유니온과 내 블로그를 추가한 모습

 

 

방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)