Creating anchor tags dynamically in HTML using JavaScript

Question

I have a question about anchor tags and javascript.Converting a URL to an anchor tag

The text box accepts a url (eg. "www.youtube.com")

I made a Javascript function that adds "http://" to the link.

How do I make it so the convert button adds a link on the webpage that takes you to the website in another tab.

My Javascript code is as follows:

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

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

Answer 1

You could generate the elements and apply the needed attributes to it. Then append the new link to the output paragraph.

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>