Dada una etiqueta de anclaje dentro de un elemento DIV y la tarea es agregar target=”_blank” al elemento de anclaje. Hay dos métodos discutidos a continuación para resolver este problema:
Enfoque 1:
- Seleccione el elemento DIV exterior del elemento ancla.
- Utilice el método .attr() para establecer la propiedad de destino en «_blank» del elemento ancla.
Cómo verificar todos los atributos de cualquier elemento en una string:
- Primero seleccione el elemento.
- Utilice el método .attributes para obtener acceso a todos los atributos del elemento.
- Utilice la concatenación de strings para agregar cada atributo y su valor a la string.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to add target="_blank"
to a link using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 20px; font-weight: bold;">
</p>
<div id="outer">
<a id = "a" href="https://www.geeksforgeeks.org">
THIS IS LINK
</a>
</div>
<br>
<button onclick = "gfg_Run()">
Click Here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 26px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = 'Click on the button to add'
+ ' target="_blank" to the link.';
// This function only returns all attribute
// properties of DOM element as a string and
// has nothing to do with the target property
function getAttr() {
var elmt = document.getElementById("a");
// Adding the every attribute to the string.
for (var i = 0, attr = elmt.attributes,
n = attr.length, str = ""; i < n; i++) {
str = str + attr[i].nodeName + "='"
+ attr[i].nodeValue + "'<br>";
}
// Returns the string of attributes
return str;
}
el_down.innerHTML = getAttr();
function gfg_Run() {
// Set the target property to '_blank'.
$('#outer a').attr('target', '_blank');
el_down.innerHTML = getAttr();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Primero seleccione el DIV externo y luego el elemento ancla interno con la ayuda de los métodos document.getElementByID() y document.getElementsByTagName() respectivamente.
- Utilice el método .setAttribute(‘target’, ‘_blank’) para establecer el atributo de destino.
Cómo ver todos los atributos de cualquier elemento como una string:
- primero seleccione el elemento.
- Utilice el método .attributes para obtener acceso a todos los atributos del elemento.
- Utilice la concatenación de strings para agregar cada atributo y su valor a la string.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to add target="_blank"
to a link using jQuery ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 20px; font-weight: bold;">
</p>
<div id="outer">
<a id = "a" href="https://www.geeksforgeeks.org">
THIS IS LINK
</a>
</div>
<br>
<button onclick = "gfg_Run()">
Click Here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 26px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = 'Click on the button to add'
+ ' target="_blank" to the link.';
// This function returns all attribute properties
// of DOM element as a string and has nothing
// to do with the target property
function getAttr() {
var elmt = document.getElementById("a");
for (var i=0, attr=elmt.attributes,
n=attr.length, str = ""; i<n; i++){
str = str + attr[i].nodeName + "='"
+ attr[i].nodeValue + "'<br>";
}
return str;
}
el_down.innerHTML = getAttr();
function gfg_Run() {
// Getting the anchor element inside the outer DIV.
var el = document.getElementById('outer')
.getElementsByTagName('a');
for (var i = 0; i < el.length; i++){
// Set the target property of every anchor
// element inside the outer DIV
el[i].setAttribute('target', '_blank');
}
el_down.innerHTML = getAttr();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA