JavaScriptを使用してリンクを作成するにはどうすればよいですか？

128

タイトルの文字列とリンクの文字列があります。JavaScriptを使用してページにリンクを作成するために2つを組み合わせる方法がわかりません。どんな助けでもありがたいです。

EDIT1：質問に詳細を追加します。これを理解しようとしているのは、RSSフィードがあり、タイトルとURLのリストがあるためです。タイトルをURLにリンクして、ページを使いやすくしたいと思います。

EDIT2：私はjQueryを使用していますが、jQueryをまったく使用していないので、この状況で役立つかもしれないことに気付きませんでした。

— ザビエル
ソース

RSSフィードをjQueryまたは何か（Mootools、Dojo、Atlasなど）でロードしていますか？ページの読み込み時に取得したサードパーティのRSSリストに基づいてアンカータグを動的に作成しようとしている場合は、jQueryライブラリなどを使用して要素を追加することをお勧めします。この場合の詳細は、何をする必要があるかを知るために重要です。ただし、DOMメソッドは有用な例です。

— Jared Farrish、2011年

このリンクを試してみてください。有益だと思います

— Yitzhak Weinberg

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

5

@Nadu-私の回答の編集を中止してください。特定のことを言わせたい場合は、独自のものを追加してください。それが正当化されるほど十分に「異なる」ものでなければ、編集を正当化するほど十分に異なるものではありません。

— Jared Farrish 2017年

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=previewプランカーの例を作成しました。

— ハロルドカスティーヨ

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);

上記のすべての例では、アンカーを「body」だけでなく任意の要素に追加できます。これdesiredLinkは、アンカー要素が指すアドレスdesiredTextを保持する変数であり、表示されるテキストを保持する変数ですアンカー要素。

— gion_13
ソース

3

あなたが除外した唯一のものは次のとおりだと思います：document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

XSSを回避するには、文字列の連結（+）と.innerHTMLHTMLを構築するときに回避する必要があります。jQueryを使用する.attr("href", desiredLink)と、.text(desiredText)ここで必要なものが得られます。

— ウェスターナー

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>

— 身動きが取れない
ソース

12

いくつかの方法があります：

生のJavaScript（JQueryのようなヘルパーなし）を使用したい場合は、次のようにします。

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);

もう1つの方法は、リンクをドキュメントに直接書き込むことです。

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

— ルーパー
ソース

私は間違いなく最初のオプションの方が好きです。そのために+1しますが、JSとHTMLを混在させると、コンテンツと動作が混在するため、別々にする必要があります。やり過ぎると、メンテナンスの悪夢につながる可能性があります。

— jmort253 2011年

私も最初のオプションを好む傾向がありますが、おそらくJQueryを使用して同じ効果を実現します（読みやすさとメンテナンスの容易さのため）。

— Roopinder '23年

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>

スニペットを展開

「アンカーオブジェクト」には、リンクとそのテキストを設定するための独自の*（継承）*プロパティがあります。したがって、それらを使用してください。.setAttributeの方が一般的ですが、通常は必要ありません。a.title ="Blah"同じことを行い、より明確になります！さて.setAttributeを要求する状況はこれです：var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
プロトコルを開いたままにします。代わりにのhttp： //example.com/pathだけ使用//example.com/pathに検討します。example.comにhttp：とhttps：の両方でアクセスできるかどうかを確認します。ただし、95％のサイトが両方で機能します。
OffTopic：知っているJSでのリンクの作成については本当に関連多分よくない： 時々クロームのようにさてあなたは使用することができ、コンソールはdev$("body")の代わりにdocument.querySelector("body")A_$ = document.querySelectorとあなたの努力意志「名誉」不正な呼び出しエラー、あなたがそれを初めて使用するとき。これは、割り当てが .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が「<-それはかっこいい！」

— ナドゥ

-4

あなたはこれを中に貼り付けます：

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

— ゼロ
ソース

OPはJavaScript（HTMLではない）でリンクを作成することを明示的に求めています！

— ハテフ2016