JavaScript를 사용하여 동적으로 링크에 "href"속성을 추가하려면 어떻게해야합니까?

95

hrefJavaScript를 사용하여 동적으로 링크에 속성을 추가하려면 어떻게 해야합니까?

기본적으로 href속성을 <a></a>동적으로 추가하고 싶습니다 (예 : 사용자가 웹 사이트의 특정 이미지를 클릭 할 때).

그래서 :

<a>Link</a>

다음으로 이동해야합니다.

<a href="somelink url">Link</a>

javascript html

— Pavel
소스

165

var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"

— 스테 브
소스

흥미 롭군. 필드로 속성에 직접 액세스 할 수 있다는 것을 몰랐습니다 (를 사용하여 아래 내 솔루션과 비교 setAttribute). 이 접근 방식이 표준인지 아는 사람이 있습니까?

— mgiuca

DOM 요소 href는 el.href에서 직접 설정할 수있는 속성이라고 생각합니다. 대신, setAttribute (el, attr)는 특정 DOM 요소에 일부 사용자 정의 속성을 추가하는 데 사용되므로이 경우 표준을 설정하는 데 사용할 필요가 없습니다. attr

— stecb

그러나 두 가지 방법 모두 맞 습니까? 답을 비판하려고하지 않는 것이 좋습니다. 그러나 웹에서는 자신에게 맞는 것을 얻는 것만으로는 충분하지 않습니다. 모든 브라우저에서 작동해야하며 표준을 따라야합니다. FWIW, 이것은 나에게도 (Firefox에서) 작동하지만 실제로 표준 방법인지 여부를 알고 싶습니다. W3C DOM 사양 ( w3.org/TR/DOM-Level-2-Core/core.html ) 은이 를 언급하지 않는 것 같습니다.

— mgiuca

6

요소와 더 쉽게 상호 작용할 수있는 인터페이스입니다. 예를 들어 모든 링크에 정의 된 방법을 가지고 HTMLLinkElement같은 특정 필드를 설정하는 지지대 href. 필요없이 사용할 수있는 참조를 확인하려면 참조를 확인해야 setAttribute합니다. 또 다른 예는 새 행을 만들고 테이블에 추가 하지 않고도 새 행을 삽입 하는 데 사용할 수 있는 <table>요소 ( HTMLTableElement ) 입니다. insertRow()<tr>

— 태국

3

@mgiuca : 일반적으로 HTML DOM의 경우 setAttribute()및 속성을 사용하는 것을 선호해야합니다.이 속성 getAttribute()은 IE에서 손상되고 항상 예상 한대로 수행되지는 않습니다. 참조 stackoverflow.com/questions/4456231/…

— Tim Down

25

<a>요소 (사용 document.getElementById또는 다른 방법)에 대한 DOM 개체를 얻는 방법을 알고 있다고 가정합니다 .

속성을 추가하려면 DOM 객체 에서 setAttribute 메소드를 사용하면됩니다 .

a = document.getElementById(...);
a.setAttribute("href", "somelink url");

— mgiuca
소스

pal, setattribute는 속성을 수정하는 데 표준이 아닙니다. 현재 값에 액세스하거나 수정하려면 속성을 사용해야합니다. 예를 들어, elt.setAttribute ( 'value', val) 대신 elt.value를 사용하십시오. developer.mozilla.org/en/DOM/element.setAttribute#Notes

— 나빈

@naveen "가장 주목할만한 XUL"이라고하는데, 아마도 이것이 무엇인지는 아닐 것입니다. 어떤 다른 값을 가리키는 지 잘 모르겠지만 ( "특정 속성"은 매우 모호함), setAttribute분명히 표준입니다 ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ). W3C는 작동하지 않는 속성을 정의하지 않습니다. 반대로 특정 속성 이름에 대해 속성 사용이 실패한다는 것을 보장 할 수 있습니다. 같은 tagName, 그리고 setAttribute사람들은 이미 필드 / Element 인터페이스의 방법이 있습니다 -. 속성에 대한 속성을 언급하는 W3C 문서의 어느 곳도 볼 수 없습니다.

— mgiuca

@mgiuca : 마지막 댓글을 게시 한 후 관련 사양을 찾은 것 같습니다. 속성 실패에 대한 귀하의 요점을 이해하지 못하고 tagName. 사용자 정의 속성에 대해 이야기하고 있습니까?

— Tim Down

DOM (브라우저에서 구현 된 경우에도)은 HTML뿐만 아니라 일반적인 XML 트리 작업을위한 일반적인 사양입니다. 임의의 XML 요소로 작업 할 때 특성을 안정적으로 가져오고 설정하는 유일한 방법은 getAttribute및 setAttribute; "tagName"속성으로 작동 할 수없는 속성의 예입니다. HTML로 작업 할 때와 DOM HTML 사양에 정의 된 특정 속성에 대해서만 속성을 사용하여 속성을 읽고 할당 할 수 있습니다.

— mgiuca 2011 년

나는 아마도 오해하고 있지만 여전히 혼란 스럽습니다. tagName 는Element HTML과 XML DOM 모두에서 JavaScript 의 객체 속성이며 getAttribute("tagName")( getAttribute()및 구현 setAttribute()이 중단 된 IE 제외)를 통해 요소의 태그 이름을 가져올 수 없습니다 .

— Tim Down

3

첫째, 변화 시도 <a>Link</a>에 <span id=test><a>Link</a></span>.

그런 다음 호출중인 javascript 함수에 다음과 같이 추가합니다.

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

이렇게하면 링크가 다음과 같이 표시됩니다.

<a href="somelink">Link</a>

— 라훌 수다
소스

안녕하세요. Stackoverflow에 오신 것을 환영합니다. 영업 이익의 질문은을 추가하는 방법에 대한 것으로 보인다 href에 기존 a 태그 ( 나는 기본적으로 동적 </a>를 Ra이고하는 HREF 속성을 추가 할 ). 그러나이 답변하는 방법을 설명하는 것으로 보인다 만들a 에 태그를 href.

— Moishe Lipsker

1

document.getElementById('link-id').href = "new-href";

나는 이것이 오래된 게시물이라는 것을 알고 있지만 여기에 일부 사람들에게 더 적합한 한 줄짜리 글이 있습니다.

— noɥʇʎԀʎzɐɹƆ
소스