자바스크립트 javascript document.write에 하이퍼링크 걸기 (사이트 링크)

자바스크립트(javascript) 작성 시 document.write 문 내에 사이트 주소를 삽입하게 될 경우 “”,” 등 따옴표 안에 들어가게 되어 텍스트 형식(string)으로 인식됩니다.


document.write("https://www.google.com/");Code language: JavaScript (javascript)

그러므로 위 코드처럼 작성 했을 경우는 사이트 주소이지만 하이퍼링크가 동작하지 않게 됩니다.

데이터 타입을 알아보겠습니다.

url만 입력했을 경우 데이터 타입

document.write(typeof "https://www.google.com/")Code language: JavaScript (javascript)

>> string

document.write 내부의 데이터를 정확히 문자형으로 인식하는 것을 볼 수 있습니다.

그럼 해당 문자열에 하이퍼링크를 덮어씌우려면 어떻게 해야 할까요?

document.write 문은 html 태그를 포함할 수 있습니다.

그렇기 때문에 a href 문을 포함해서 코드를 작성할 수 있습니다. 해당 태그를 넣어서 문장을 다시 작성해보겠습니다.

첫 번째 #는 하이퍼링크를 걸 url 주소이고, 두 번째 #는 하이퍼링크가 걸릴 텍스트입니다. url주소가 텍스트로 인식되는 문제를 고치고자 함이니 동일한 사이트 url 주소를 넣어주면 되겠습니다.

document.write('<a href="#">#</a>')Code language: HTML, XML (xml)

#가 들어있는 자리에 원하는 url을 치환합니다.

document.write('<a href="https://www.google.com/">https://www.google.com/</a>')Code language: HTML, XML (xml)

>> https://www.google.com/

깔끔하게 사이트 주소에 url이 그대로 입혀집니다.

만약 계속해서 오류가 난다면 같은 형태의 따옴표(‘,”)가 중복해서 들어간 것은 아닌지 확인하세요. 따옴표가 중복해서 들어갈 때는 같은 따옴표를 두 개 연속으로 쓰지 않고 ‘. ” 등으로 구별해서 사용합니다.

자바스크립트 javascript document.write에 하이퍼링크 걸기, 사이트 링크 거는법에 대하여 알아보았습니다.


댓글 남기기