2017-02-18 14 views
5

アンカータグとjavascriptに関する質問があります。 Converting a URL to an anchor tagJavaScriptを使用してアンカータグをHTMLで動的に作成する

テキストボックスは、URL(例えば "www.youtube.com")を受け入れる

私は "のhttp://" を追加のJavascript機能作られたリンクにします。

変換ボタンをクリックすると、別のタブのウェブサイトにリンクするウェブページ上のリンクが追加されます。次のように

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

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

function convert() 
{  
    url=document.getElementById("link").value; 
    webpage = "http://" + url; 
} 

答えて

0

あなたはちょうどより多くの参照

How to add anchor tags dynamically to a div in Javascript?

はこちらを見てください動的

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

アンカータグを追加することによってこれを行うことができます

0

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>

2

要素を生成し、それにneede属性を適用できます。次に、出力パラゴラに新しいリンクを追加します。

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>

+0

今のところ、これは素敵な別のタブで開き、およそOPの質問に対処し、 '' 'target'''属性を含めることが唯一の答えです! – j3py

0

私は、JavaScriptの書き方を知っていると仮定ので、私はそこに行くことはありません。問題は、<a>タグのtarget属性を理解することです。

W3Schools: Target Attribute

関連する問題