https://www.techiedelight.com/dynamically-generate-anchor-tag-javascript/
Dynamically generate an anchor tag with JavaScript/jQuery
1. Using JavaScript
In vanilla JavaScript, you can use the document.createElement() method, which programmatically creates the specified HTML element. The following example creates a new anchor tag with desired attributes and appends it to a div element using the Node.appendChild() method.
JS
document.getElementById('generate').onclick = function() {
var a = document.createElement('a');
a.target = '_blank';
a.href = 'https://www.techiedelight.com/';
a.innerText = 'Techie Delight';
var container = document.getElementById('container');
container.appendChild(a);
container.appendChild(document.createElement('br'));
}
HTML
<!doctype html>
<html lang="en">
<body>
<div id="container"></div>
<div>
<button id="generate">Generate Hyperlink</button>
</div>
</body>
</html>
JQuery
With jQuery, you can use the .append() method to append the anchor tag at the end of the specified div element. This is demonstrated below:
JS
$(document).ready(function() {
$('#generate').click(function() {
$('#container').append(
$(document.createElement('a')).prop({
target: '_blank',
href: 'https://www.techiedelight.com/',
innerText: 'Techie Delight'
})
).append(
$(document.createElement('br'))
);
})
});
HTML
<!doctype html>
<html lang="en">
<body>
<div id="container"></div>
<div>
<button id="generate">Generate Hyperlink</button>
</div>
</body>
</html>
Alternatively, here’s a shorter version:
JS
$(document).ready(function() {
$('#generate').click(function() {
var url = 'https://www.techiedelight.com/';
var text = 'Techie Delight';
$("#container").append(`<a href="${url}" target="_blank">{text}</a>`);
})
});
HTML
<!doctype html>
<html lang="en">
<body>
<div id="container"></div>
<div>
<button id="generate">Generate Hyperlink</button>
</div>
</body>
</html>
]
https://stackoverflow.com/questions/4261687/best-way-to-create-a-link-using-jquery
As Steven Xu correctly mentioned, inserting HTML strings is faster than manipulating the DOM, which is why I'd recommend creating elements with string manipulation instead of jQuery.
You need only change this:
var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
"')\">This is blah<a>";
to this:
var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
"')\">This is blah</a>";
(close <a> tag with </a> at the end of the string).
The string manipulation is much faster than the DOM Manipulation (see this for example). Moreover the difference will be much more if you try to insert a DOM fragment in the middle of a large HTML code. The usage of DOM DocumentFragments can a little improve the performance, but the usage of the string concatenation is the fastest way.
All other answers wrote his answer without the knowledge about the context (jqGrid custom formatter) where you use it. I try to explain why it is important in your case.
Because of performance advantages, jqGrid builds HTML code fragments for the grid first as the array of strings, then build one string from the string array with respect of .join('') and insert the result in the table body at the end of all only. (I suppose that you use gridview:true jqGrid option which is almost always recommended). The jqGrid custom formatter is a callback function used by jqGrid during the building of the grid (table) body. The custom formatter must return the HTML code fragment as the string as the result. The string will be concatenated with other strings which build the body of the grid (table).
So if you will change your current code from pure string manipulation to the jQuery DOM manipulation and converting the results to the string (which needed be returned as the result of the custom formatting) then your code will work slowly and you will have no other advantages*.
The only real disadvantage of the usage of the string manipulations is the problem of the verification of the code which you build. For example, the usage of code without the close tags </a> is a potential problem which you can have. In the most cases the problem will be solved during the inserting of the DOM fragment, but sometimes you can receive real problems. So you should just test the code which you inserted very carefully.
One more remark: If you want to follow unobtrusive JavaScript style you can use "#" as the value for the href attribute and bind the corresponding click event inside of gridComplete or loadComplete event handler. If you will have problems with the implementation of this you can open a new question and I will try to write the corresponding code example for you.
Note: I think the best implementation way will be the usage of onCellSelect or beforeSelectRow instead of binding click event to every <a> element in the column. I recommend to read the following answers for details: this one, another one and one more old answer.
Jquery Dynamic anchor tag
In below example I have created simple link (anchor tag) which is pointed to http://www.google.com along with its different properties like attributes, text, class etc. Once the link is form we will add it to div element.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btn').click(function() {
var link = $("<a>");
link.attr("href", "http://www.google.com");
link.attr("title", "Google.com");
link.text("Google");
link.addClass("link");
$(".box").html(link);
});
});
</script>
</head>
<style>
p {
margin: 10px;
font-weight: bold;
}
.link {
color: red;
font-size: 25px;
font-weight: bold;
text-decoration-style: solid;
margin: 10px;
}
</style>
<body>
<h1>Jquery Show Hide </h1>
<div class="box" id="box"></div>
<p><input type="button" id="btn" value="Create Link"></p>
</body>
</html>
EXAMPLE 3
https://www.kunal-chowdhury.com/2018/04/html-jquery-css-to-anchor-links.html
To get started, you need to first add the jQuery plugin into your page. Add the following script inside the <HEAD> . . . </HEAD> tag of your HTML page:
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"/>
Now, add the following CSS style inside the <HEAD> . . . </HEAD> to decorate the page headings. For demonstrating purpose, I have used only H1 and H2 tags, but you may like to add the other headings too. Here's the CSS for your reference:
<style>
.toc
{
text-decoration:none;
}
#anchor-icon
{
display:inline;
background:url("anchor.jpg");
background-repeat:no-repeat;
}
a.heading-link
{
opacity:0;
margin-left:10px;
text-decoration:none;
}
h1:hover a.heading-link
{
opacity:1;
}
h2:hover a.heading-link
{
opacity:1;
}
</style>
Add the following JavaScript (jQuery) implementation inside the page. This could be either placed inside the <HEAD> . . . </HEAD> tag or before closing the </BODY> tag. As the code is written inside the $(document).ready(function() { }); block, it will execute once the DOM has been loaded.
<script type="text/javascript">
$(document).ready(function() {
$("h1,h2").each(function(i) {
var heading = $(this);
var headingId = "topic" + (i + 1);
heading.attr("id", headingId);
heading.append("<a class='heading-link' href='#" + headingId + "'><div id='anchor-icon'>    </div></a>");
});
})
</script>
If you don't have the <H1/>, <H2/> tags inside your page, add few of them inside the <BODY> . . . </BODY> and provide string content to them. Now, run the web application and/or the HTML page. You will see the headings similar to this:
This is 'Heading 2' > Hover on it
This is also 'Heading 2' > Hover on it
Hover over the headings and you will see an anchor icon shown beside the hovered headings. Hover over the icon and you will see a link associated with it. Click the icon to see the behavior. Make sure to place the icon named "anchor.jpg" in the same directory of the page or refer it to a relative path of the web application.
Wasn't it easy? How likely you would like to add the same in your web application? Please share your views with us by commenting below. Don't forget to share the links in your social channel and help your friend and colleagues to learn this.
EXAMPLE FOUR
HTML:
<head>
<script src="Scripts/Generate.js"></script>
</head>
Scripts/Generate.js:
if(!document.getElementById('id1')) {
var script = document.createElement('script');
script.id = 'id1';
script.src = 'Scripts/Script1.js';
document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
var link = document.createElement('link');
link.id = 'id2';
link.rel = 'stylesheet';
link.href = 'CSS/Css1.cs';
document.head.appendChild(link);
}
Afterwards, the HTML is:
<head>
<script src="Scripts/Generate.js"></script>
<script id="id1" src="Scripts/Script1.js"></script>
<link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>