1

Necesito poner la palabra "hola" en el span que contenga el atributo "data-cualquiercosa", es decir, para este span:

<span data-cualquiercosa="asdasda"></span>

Necesito hacer esto:

$("span[data-cualquiercosa]").html("hola");

Nótese que esto de arriba es con JQuery, pero necesito saber cómo hacer lo mismo con javascript puro.

3 respuestas 3

2

En JavaScript puro existen dos funciones que te pueden servir:

  • document.querySelector: selecciona y devuelve un único elemento que cumpla el selector especificado. Si hay varios, sólo devuelve el primer elemento que cumpla el selector.
  • document.querySelectorAll: selecciona todos los elementos que cumplen el selector especificado. Devuelve una lista con todos esos elementos.

En tu caso, como es un solo elemento, te valdrá querySelector.

Y para cambiar el texto de dentro puedes usar:

Aquí lo puedes ver funcionando:

document.querySelector("span[data-cualquiercosa]").textContent = "hola";
<span data-cualquiercosa="asdasda"></span>

1
1

Basta usar document.querySelector (cuando el elemento se asume único), document.querySelectorAll (cuando se asumen varios elementos)

var span = document.querySelector('span[data-cualquiercosa="asdasda"]')

span.style.display = 'block'
span.style.height = '30px'
span.style.backgroundColor = 'blue'
span.style.color = 'white'

span.appendChild(
  document.createTextNode('Modificado desde DOM')
)
<span data-cualquiercosa="asdasda"></span>

0

Si quieres cambiar todos los elementos que tengan ese atributo, puedes usar querySelector a partir de IE8+:

// IE 8+
var elementos = document.querySelectorAll('[data-cualquiercosa="asdasda"]');
console.log(elementos[0]);
[].forEach.call(elementos, function(elemento) {
  elemento.innerHTML = 'Otro texto';
});
<span data-cualquiercosa="asdasda"></span>
<br />
<span data-cualquiercosa="asdasda">1</span>


No obstante, recomiendo que leas este artículo: Don’t use data attributes to find HTML elements with JS

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.