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.
-
Look at these two answers, see if they help you: stackoverflow.com/questions/18500759/… stackoverflow.com/questions/4772774/…Alberto Comuñas– Alberto Comuñas2017-07-19 14:36:00 +00:00Commented Jul 19, 2017 at 14:36
Add a comment
|
5 Answers
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
6 Comments
Salman
Can I use a.innerHTML()? The colsole shows me an error saying that this is not a function
guest271314
@Salman Try substituting
.textContent for .textSalman
@guest271314 I have to use .innerHTML() as I have to append all this in an HTML tree with <ul> and <li>
Scott Marcus
@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.Salman
@ScottMarcus Actually I want to store value from a json file. Can I use .textContent for that?
|
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);
6 Comments
Scott Marcus
Don't use
.innerHTML when you are not supplying HTML content.Scott Marcus
.text is property for option elements. I don't believe it's standard on others. Use textContent for them.
Osama
w3schools.com/jsref/prop_anchor_text.asp look to this page of W3school it will help you
Scott Marcus
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
If you look here, you will see that it can be used (in some browsers), but it is really just a synonym for
textContent. |
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.
1 Comment
Scott Marcus
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.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);
1 Comment
Scott Marcus
.text is property for option elements. I don't believe it's standard on others. Use textContent for them.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>