JavaScriptを使用して動的にリンクに「href」属性を追加するにはどうすればよいですか?


93

hrefJavaScriptを使用して動的にリンクに属性を追加するにはどうすればよいですか?

基本的に、href属性を<a></a>動的に追加したい(つまり、ユーザーがWebサイトの特定の画像をクリックしたとき)。

だからから:

<a>Link</a>

私は行く必要があります:

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

回答:


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

面白い。属性をフィールドとして直接アクセスできることを知りませんでした(以下の私のソリューションと比較して、を使用してくださいsetAttribute)。このアプローチが標準であるかどうか誰かが知っていますか?
mgiuca 2011年

DOM要素のhrefは、el.hrefで直接設定できる属性だと思います。代わりに、setAttribute(el、attr)を使用して、特定のDOM要素にカスタム属性を追加します。この場合、この属性を使用してstdを設定する必要はありません。attr
stecb

しかし、どちらも正しいのでしょうか?答えを批判しようとはしていません-正解かもしれません。しかし、Webでは、自分に合ったものを入手するだけでは不十分です。すべてのブラウザで機能する必要があるため、標準に従う必要があります。FWIW、これは私にとっても(Firefoxで)機能しますが、それが実際に標準的な方法であるかどうかを知りたいです。W3C DOM仕様(w3.org/TR/DOM-Level-2-Core/core.html)はそれについて言及していないようです。
mgiuca

6
これらは、要素とより簡単に対話するためのインターフェースです。たとえば、すべてのリンクには、HTMLLinkElementなどの特定のフィールドの設定をサポートするで定義されたメソッドがありますhref。参照せずに、どれを使用する必要がないかを確認する必要がありますsetAttribute。もう1つの例は<table>要素(HTMLTableElement)で、insertRow()を作成<tr>してテーブルに追加することなく、新しい行を挿入できます。
タイの

3
@mgiuca:一般に、HTML DOMの場合は、やの代わりにプロパティを使用することをお勧めします。これは、IEで壊れてsetAttribute()おりgetAttribute()、期待する動作を常に実行するとは限りません。stackoverflow.com/questions/4456231/…を
Tim Down

25

<a>要素のDOMオブジェクトを取得する方法(使用document.getElementByIdまたはその他のメソッド)を知っていると思います。

属性を追加するには、DOMオブジェクトでsetAttributeメソッドを使用します。

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

pal、setattributeは属性を変更するためのかなり非標準です。現在の値にアクセスまたは変更するには、プロパティを使用する必要があります。たとえば、elt.setAttribute( 'value'、val)の代わりにelt.valueを使用します。 developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen

@naveenこれは、「XULで最も顕著」とありますが、これはおそらくこれとは異なります。他にどの値を参照しているかsetAttributeはわかりませんが(「特定の属性」は非常にあいまいです)、明らかに標準です(w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082)、 W3Cは、機能しない属性を定義していません。逆に、特定の属性名でプロパティを使用すると失敗することを保証できます。等tagName、及びsetAttribute-それら既にElementインタフェースのフィールド/メソッドです。属性のプロパティについて言及しているW3Cドキュメントのどこにも見当たりません。
mgiuca 2011年

@mgiuca:最後のコメントを投稿した後、関連する仕様を見つけたようです。プロパティが失敗し、次に言及することについてのあなたのポイントを理解できませんtagName。カスタム属性について話していますか?
Tim Down、

つまり、DOMは(ブラウザーに実装されている場合でも)HTMLだけでなく、一般的にXMLツリーを操作するための一般的な仕様です。任意のXML要素を使用する場合、属性を確実に取得および設定する唯一の方法はgetAttributeおよびsetAttributeです。"tagName"プロパティとして機能できない属性の例です。HTMLを使用する場合、およびDOM HTML仕様で定義されている特定の属性についてのみ、プロパティを使用して属性を読み取り、割り当てることができます。
mgiuca '15年

私はおそらく誤解しているでしょうが、それはまだ混乱しています。tagName あるの財産ElementHTMLとXMLのDOMの両方でのJavaScriptのオブジェクトは、あなたは経由要素のタグ名を取得することはできませんgetAttribute("tagName")(その実装のIE、を除いてgetAttribute()setAttribute()正確にあなたが言っているのと反対だ、壊れています)。
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へようこそ。OPの質問はhref既存の aタグにを追加する方法に関するもののようです基本的に、<a> </a>にhref属性を動的に追加したい)。ただし、この回答は、でタグを作成する方法を説明しているようです。ahref
Moishe Lipsker 16

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

私はこれが古い記事であることを知っていますが、これは一部の人々に適しているかもしれないワンライナーです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.