자바 스크립트를 사용하여 링크를 생성하려면 어떻게합니까?

128

제목 문자열과 링크 문자열이 있습니다. Javascript를 사용하여 페이지에 링크를 만들기 위해 두 가지를 결합하는 방법을 모르겠습니다. 도움을 주시면 감사하겠습니다.

EDIT1 : 질문에 더 많은 세부 사항 추가. 내가 이것을 알아 내려는 이유는 RSS 피드가 있고 제목과 URL 목록이 있기 때문입니다. 페이지를 유용하게 만들기 위해 제목을 URL에 연결하고 싶습니다.

EDIT2 : 나는 jQuery를 사용하고 있지만 완전히 처음이며이 상황에서 도움이 될 수 있다는 것을 알지 못했습니다.

— 자비에르
소스

RSS 피드를 jQuery 또는 기타 (Mootools, Dojo, Atlas 등)로로드하고 있습니까? 페이지로드시 획득 한 타사 RSS 목록을 기반으로 앵커 태그를 동적으로 생성하려는 경우 jQuery 라이브러리 또는 기타를 사용하여 요소를 추가하는 것이 좋습니다. 이 경우 세부 사항은 수행해야 할 작업을 아는 데 중요합니다. 그러나 DOM 메서드는 유용한 예시입니다.

— Jared Farrish 2011 년

이 시도 링크 내가 도움이 될 수 있다고 생각

— 이츠하크 와인버그

227

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

— 자레드 패리쉬
소스

1

이것은 페이지에 앵커 태그를 추가하기 위해 DOM 메소드를 사용하는 매우 일반적인 예입니다. 예를 들어 appendChild 메서드는 목록 요소, TD 또는 페이지 내의 다른 요소 일 수 있습니다. 참조 : quirksmode.org

— Jared Farrish 2011 년

5

@Nadu-내 대답 편집을 중지하십시오. 특정 말을하려면 자신의 말을 추가하십시오. 보증 할만큼 "다른"것이 아니라면 편집을 보증 할만큼 충분히 다르지 않습니다.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview 플 런커 예제를 만들었습니다.

— Harold Castillo

61

JavaScript로

var a = document.createElement('a');
a.setAttribute('href',desiredLink);
a.innerHTML = desiredText;
// apend the anchor to the body
// of course you can append it almost to any other dom element
document.getElementsByTagName('body')[0].appendChild(a);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

또는 @travis가 제안한 대로 :

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>

JQuery 사용

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

위의 모든 예에서 앵커를 '본문'뿐만 아니라 모든 요소에 추가 할 수 desiredLink있으며, 앵커 요소가 가리키는 주소 desiredText를 보유하는 변수이며 표시 될 텍스트를 보유하는 변수입니다. 앵커 요소.

— gion_13
소스

3

: 나는 당신이 왼쪽으로 유일한 것으로 생각document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— 트래비스

1

XSS를 방지하려면 문자열 연결 ( +) 및 .innerHTMLHTML 빌드를 피해야합니다 . jQuery를 함께, .attr("href", desiredLink)그리고 .text(desiredText)당신이 원하는 무엇인가.

— Wes Turner

15

JavaScript를 사용하여 링크 만들기 :

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

또는

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

또는

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

— Naveed
소스

12

몇 가지 방법이 있습니다.

JQuery와 같은 도우미없이 원시 Javascript를 사용하려면 다음과 같이 할 수 있습니다.

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

다른 방법은 링크를 문서에 직접 쓰는 것입니다.

document.write("<a href='" + link + "'>" + text + "</a>");

— Roopinder
소스

나는 확실히 첫 번째 옵션이 더 좋습니다. +1하지만 JS와 HTML을 혼합하면 콘텐츠와 동작이 혼합되므로 분리되어야합니다. 과도하게 수행하면 유지 관리에 악몽이 생길 수 있습니다.

— jmort253 2011 년

나는 첫 번째 옵션을 선호하는 경향이 있지만 아마도 JQuery를 사용하여 동일한 효과를 얻을 수 있습니다 (가독성 및 유지 관리 용이성).

— Roopinder 2011 년

1

당신은 아마 document.write를의 사용을 피해야한다 stackoverflow.com/questions/4520440/...을

— TryHarder

4

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

스 니펫 확장

'Anchor Object'에는 링크, 텍스트를 설정하기위한 고유 한 * (상 속됨) * 속성이 있습니다. 그러니 그냥 사용하세요. .setAttribute 가 더 일반적이지만 일반적으로 필요하지 않습니다. a.title ="Blah"똑같이 할 것이고 더 명확합니다! .setAttribute 가 필요한 상황 은 다음과 같습니다.var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
프로토콜을 열어 둡니다. http : //example.com/path 대신 //example.com/path를 사용하는 것이 좋습니다. http : 및 https :에서 example.com에 액세스 할 수 있는지 확인 하지만 사이트의 95 %가 둘 다에서 작동합니다.
OffTopic : JS에서 링크를 만드는 것과는 관련이 없지만 알아두면 좋을 수도 있습니다. 가끔은 크롬 dev-console에서와 같이A$("body")대신사용할 수있는 것처럼 처음 사용할 때 잘못된 호출 오류로귀하의 노력을 '경의'합니다. 할당이 .querySelector ( 클래스 메서드에대한 참조)를'잡기' 때문 입니다. 으로당신은 또한 컨텍스트를 포함하는 것이다 (여기입니다) 당신은 얻을 개체 당신이 그것을 예상대로 작동 것이다 방법을.document.querySelector("body")_$ = document.querySelector.bind(...document

— 나두
소스

3

원시 JavaScript를 사용하여 동적으로 하이퍼 링크를 만듭니다.

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

— jmort253
소스

`anchorElem.text = yourLinkText; `더 명확해질 innerHTML 대신. 그리고 네, 만약 yourLinkText가 "<-멋지네요!"

— Nadu

-4

이것을 안에 붙여 넣습니다.

<A HREF = "index.html">Click here</A>

— 제로 던 워시
소스

OP는 HTML이 아닌 JavaScript로 링크를 생성하도록 명시 적으로 요청하고 있습니다!

— hatef apr