Given an anchor tag inside a DIV element and the task is to add target=”_blank” to the anchor element. There are two methods discussed below to solve this problem:
Approach 1:
- Select the outer DIV element of the anchor element.
- Use .attr() method to set the target property to “_blank” of the anchor element.
How to Check all attributes of any element in a string:
- First select the element.
- Use .attributes method to get access to every attribute of the element.
- Use string concatenation to append every attribute and its value to the string.
Example: This example implements the above approach.
html
<!DOCTYPE HTML> < html >
< head >
< title >
How to add target="_blank"
to a link using jQuery ?
</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >
Click on the button to add
target="_blank" to the link
</ h2 >
< div id = "outer" >
THIS IS LINK
</ a >
</ div >
< br >
< button onclick = "gfg_Run()" >
Click Here
</ button >
< h2 id = "Result" style = "color:green;" ></ h2 >
< script >
let res = document.getElementById("Result");
// This function only returns all attribute
// properties of DOM element as a string and
// has nothing to do with the target property
function getAttr() {
let elmt = document.getElementById("a");
let attr = elmt.attributes, str = "", n = attr.length;
// Adding the every attribute to the string.
for (let i = 0; i < n ; i++) {
str = str + attr[i].nodeName + "='"
+ attr[i].nodeValue + "'<br>";
}
// Returns the string of attributes
return str;
}
res.innerHTML = getAttr();
function gfg_Run() {
// Set the target property to '_blank'.
$('#outer a').attr('target', '_blank');
res.innerHTML = getAttr();
}
</ script >
</ body >
</ html >
|
Output:
Approach 2:
- First select the outer DIV and then the inner anchor element with the help of document.getElementByID() and document.getElementsByTagName() method respectively.
- Use .setAttribute(‘target’, ‘_blank’) method to set the target attribute.
How to see all attributes of any element as a string:
- First select the element.
- Use .attributes method to get access to every attribute of element.
- Use string concatenation to append every attribute and its value to the string.
Example: This example implements the above approach.
html
<!DOCTYPE HTML> < html >
< head >
< title >
How to add target="_blank"
to a link using jQuery ?
</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >
Click on the button to add
target="_blank" to the link
</ h2 >
< div id = "outer" >
THIS IS LINK
</ a >
</ div >
< br >
< button onclick = "gfg_Run()" >
Click Here
</ button >
< h2 id = "Result" style = "color:green;" ></ h2 >
< script >
let res = document.getElementById("Result");
// This function returns all attribute properties
// of DOM element as a string and has nothing
// to do with the target property
function getAttr() {
let elmt = document.getElementById("a");
let attr = elmt.attributes, n = attr.length, str = "";
for (let i = 0; i < n ; i++) {
str = str + attr[i].nodeName + "='"
+ attr[i].nodeValue + "'<br>";
}
return str;
}
res.innerHTML = getAttr();
function gfg_Run() {
// Getting the anchor element inside the outer DIV.
let el = document.getElementById('outer')
.getElementsByTagName('a');
for (let i = 0; i < el.length ; i++) {
// Set the target property of every anchor
// element inside the outer DIV
el[i].setAttribute('target', '_blank');
}
res.innerHTML = getAttr ();
}
</script>
</ body >
</ html >
|
Output: