createElement <a href=variable1>variable2</a>
Use setAttribute
like this:
var createA = document.createElement('a');
var createAText = document.createTextNode(theCounter);
createA.setAttribute('href', "http://google.com");
createA.appendChild(createAText);
getTheTableTag.appendChild(createA);
A more interactive example:
const insertButton = document.getElementById('insertButton');
const appendAnchorTag = () => {
const anchor = document.createElement('a');
const list = document.getElementById('linksList');
const li = document.createElement('li');
anchor.href = 'http://google.com';
anchor.innerText = 'Go to Google';
li.appendChild(anchor);
list.appendChild(li);
};
insertButton.onclick = appendAnchorTag;
<button id="insertButton">Create New Anchor Tag</button>
<ul id="linksList"></ul>
Thanks to mwilson
Here is another code sample
Change
<body> to <body id="myBody">
Add to your body:
<button onclick="outputFunction()" >click me</button>
Then add a script outside the body
<script type="text/javascript">
function outputFunction() {
var myBodyId = document.getElementById("myBody");
var newBaitTag = document.createElement('a');
var newBaitText = document.createTextNode("Bonus Click");
newBaitTag.setAttribute('href', "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
// we create new things above
// we append them to the page body below
newBaitTag.appendChild(newBaitText);
myBodyId.appendChild(newBaitTag);
}
</script>