0

Can anyone tell me how to add <a> tag and href inside it using JavaScript?

I am using:

document.createElement('a').setAttribute('href', '#');

But it doesn't seem to work.

Erazihel
  • 7,295
  • 6
  • 30
  • 53
Salman
  • 393
  • 1
  • 7
  • 23
  • Look at these two answers, see if they help you: https://stackoverflow.com/questions/18500759/createelement-a-href-variable1variable2-a https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript – Alberto Comuñas Jul 19 '17 at 14:36

5 Answers5

11

You create a node, but you do not assign the node to an element in the browser.

var a = document.createElement('a'); // generate node

a.setAttribute('href', '#');         // set attribute
a.textContent = 'foo';               // assign some text
// or use
// a.innerHTML = 'foo';
document.body.appendChild(a);        // use the node
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • Can I use a.innerHTML()? The colsole shows me an error saying that this is not a function – Salman Jul 19 '17 at 14:39
  • @Salman Try substituting `.textContent` for `.text` – guest271314 Jul 19 '17 at 14:39
  • @guest271314 I have to use .innerHTML() as I have to append all this in an HTML tree with
      and
    – Salman Jul 19 '17 at 14:42
  • @Salman You use `.innerHTML` when the content you are supplying contains HTML that needs to be parsed. That process involves a little more work. Use `textContent` when there is no HTML in the content as it is more efficient. – Scott Marcus Jul 19 '17 at 14:45
  • @ScottMarcus Actually I want to store value from a json file. Can I use .textContent for that? – Salman Jul 19 '17 at 14:55
  • @Salman Sure. Again, `.innerHTML` is just for storing content that contains HTML that should be parsed and added to the DOM. If there is no HTML in the content, then `.textContent` is the appropriate property. – Scott Marcus Jul 19 '17 at 14:57
1

This is the way to create anchor use createElement() and setAttribute() and then appendChild() to append it to your div

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.textContent= "link text";
mydiv.appendChild(aTag);
Osama
  • 2,912
  • 1
  • 12
  • 15
  • Don't use `.innerHTML` when you are not supplying HTML content. – Scott Marcus Jul 19 '17 at 14:30
  • `.text` is property for `option` elements. I don't believe it's standard on others. Use `textContent` for them. – Scott Marcus Jul 19 '17 at 14:33
  • https://www.w3schools.com/jsref/prop_anchor_text.asp look to this page of W3school it will help you – Osama Jul 19 '17 at 14:36
  • W3 Schools is not a good resource as it is widely known to have out of date and incorrect information. There is a difference between what a browser "supports" and what it actually standardized. I don't believe that the `text` property is standard on an anchor element. – Scott Marcus Jul 19 '17 at 14:39
  • If you look [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent), you will see that it can be used (in some browsers), but it is really just a synonym for `textContent`. – Scott Marcus Jul 19 '17 at 14:41
  • Will it work ? If yes so here the w3shcool is a good reference this is first second I changed it to textContent to be more formal thank you my friend – Osama Jul 19 '17 at 14:41
0

Did you try to append it in the DOM ?

var link = document.createElement('a');
link.setAttribute('href', '#link-here');
link.textContent = 'clickme';
document.body.appendChild(link);
Yordan Nikolov
  • 2,598
  • 13
  • 16
0

What you have is just the part that creates the new element. Your new hyperlink needs to have some content inside it though.

After that, you must decide where you want it to appear within the document and place it there.

Here's an example:

var newA = document.createElement('a');  // Create the new element
newA.setAttribute('href', '#');          // configure its href attribute
newA.textContent = "Click Me";           // Set content for element

// Insert the new element inside the second div
document.getElementById("d2").appendChild(newA);
<div id="d1">some content</div>
<div id="d2">some content</div>
<div id="d3">some content</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

Using just createElement() will not help. You have to add it to the document.

Check this example :

var btn = document.createElement("BUTTON");        // Create a <button> element
var t = document.createTextNode("CLICK ME");       // Create a text node
btn.appendChild(t);                                // Append the text to <button>
document.body.appendChild(btn);                    // Append <button> to <body>

Source : https://www.w3schools.com/jsref/met_document_createelement.asp

For your problem :

var newDiv = document.getElementById("newDiv");
var anchorTag = document.createElement('a');
anchorTag.setAttribute('href',"mylink.html");
anchorTag.innerHTML = "link text";
newDiv.appendChild(anchorTag);

Here, newDiv is the div where you want to add the anchor.

Yash
  • 3,438
  • 2
  • 17
  • 33
  • You use `.innerHTML` when the content you are supplying contains HTML that needs to be parsed. That process involves a little more work. Use `textContent` when there is no HTML in the content as it is more efficient. – Scott Marcus Jul 19 '17 at 14:46