web-dev-qa-db-ja.com

JavaScriptを使用してHTMLで動的にアンカータグを作成する

アンカータグとjavascriptについて質問があります。 RLをアンカータグに変換する

テキストボックスはURLを受け入れます（例：「www.youtube.com」）

リンクに「http：//」を追加するJavaScript関数を作成しました。

変換ボタンを使用して、別のタブのWebサイトに移動するリンクをWebページに追加する方法を教えてください。

私のJavaScriptコードは次のとおりです。

var webpage="";
var url="";
var message="";
var x= 0;
var page="";

function convert()
{       
    url=document.getElementById("link").value;
    webpage = "http://" + url;  
}
javascripthtmldomchild-nodes
10
Kyle Goertzen

要素を生成し、それに必要な属性を適用できます。次に、新しいリンクを出力段落に追加します。

function generate() {
    var a = document.createElement('a');
    
    a.href = 'http://' + document.getElementById('href').value;    
    a.target = '_blank';
    a.appendChild(document.createTextNode(document.getElementById('href').value));
    document.getElementById('link').appendChild(a);
    document.getElementById('link').appendChild(document.createElement('br'));
}
Link: <input id="href"> <button onclick="generate()">Generate</button>
<p id="link"></p>
7
Nina Scholz
function addLink()
{       
    var url = document.getElementById("link").value;
    var webpage = "http://" + url;
    
    var a = document.createElement("a");                 // create an anchor element
    a.href = webpage;                                    // set its href
    a.textContent = url;                                 // set its text
    
    document.getElementById("container").appendChild(a); // append it to where you want
}
a {
  display: block;
}
<div id="container"></div>
<br><br>
<input id="link"/><button onclick='addLink()'>ADD</button>
0
ibrahim mahrir

JavaScriptの書き方はご存知だと思いますので、ここでは説明しません。問題は、<a>タグのtarget属性を理解することです。

W3Schools：ターゲット属性

0
Anthony Rutledge

あなたは動的にアンカータグを追加することでこれを行うことができます

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',webpage);
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);

詳細はこちらをご覧ください

Javascriptでdivにアンカータグを動的に追加する方法

0
RupamDotInfo