target="_blank" 추가하기 (자체 정리용)

워드프레스 정보를 제공하는 블로그 Avada 2018. 2. 4. 19:29 • 댓글:

target="_blank"를 추가하는 가장 간단한 방법은 jQuery를 이용하는 것입니다.

$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

혹은

 $('#link_other a').each(function(){
  $(this).attr('target', '_BLANK');
 });

jQuery를 이용하지 않을 경우...

window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}

getElementsByClassName을 이용할 경우에는...

var var_name = document.getElementsByClassName("class_name")[0];

이와 같은 형식을 이용할 수 있습니다. 

다음과 같은 코드도 가능합니다.

var linkList = document.querySelectorAll('#link_other a');

for(var i in linkList){
 linkList[i].setAttribute('target', '_blank');
}

이런 코드도 있네요.

window.onload = function(){
  var anchors = document.getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    if (anchors[i].hostname != window.location.hostname) {
        anchors[i].setAttribute('target', '_blank');
    }
  }
}

참고:

  • https://stackoverflow.com/questions/6822945/add-target-blank-to-link-with-javascript
  • https://stackoverflow.com/questions/804256/how-do-i-add-target-blank-to-a-link-within-a-specified-div/804360
  • https://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript
  • https://www.w3schools.com/jsref/met_document_queryselectorall.asp