0

Necesito de su ayuda DEV, necesito generar un label con javascript que tenga id, clases de bootstrap y contenido. Actualmente esta asi

var  lbl = document.createElement('label');
          lbl.innerHTML = "Puntuacion";
                document.getElementById('caja_p').appendChild(lbl);

pero no consigo ponerle un ID al label que me servira para identificarlo cuando quiera eliminarlo de igual manera con JavaScript

2

1 respuesta 1

2

Puedes intentar de la siguiente manera

var  lbl = document.createElement('label');
 lbl.innerHTML = "Puntuacion";
 lbl.id = 'elIdQueQuieras'
 lbl.classList.add('una-clase', 'otra-clase')

 document.getElementById('caja_p').appendChild(lbl);

EDICIÓN

En tu comentario dices que no te funciona, pero lo cierto es que funciona muy bien. ¿Será que crees que se modificará el HTML?

Cuando modificas el DOM, estás modificando una representación en memoria del documento HTML que lee o analiza el navegador. Por lo tanto, todas las modificaciones que hagas, serán en memoria, nunca en el archivo original.

He complementado la respuesta de Fernando, para mostrar su funcionamiento, añadiendo Bootstrap y un botón para que veas el efecto.

const crearLabel = function() {
  // creamos el label
  let lbl = document.createElement('label');
  // establecemos el contenido
  lbl.innerHTML = "E-Mail";
  // le asignamos un ID (debe ser único)
  lbl.id = 'email-label';
  // le añadimos las clases de Bootstrap
  lbl.classList.add('col-sm-2', 'col-form-label', 'col-form-label-sm', 'text-primary');
  lbl.setAttribute('for', 'colFormLabelSm');
  // lo agregamos al DOM como primer hijo de su contenedor  
  document.getElementById('field-container').insertBefore(lbl, document.getElementById('field-container').firstChild);
}

// añadimos un listener al evento click del botón.
document.getElementById('insertarLabel').addEventListener('click', (event) => {
  // si el elemento ya existe evitamos que se vuelva a crear.
  if(document.getElementById('email-label')) {
    console.log(`El elemento label con 'id=email-label' ya existe en el DOM.`);
    return;
  }
  // si el elemento no existe, lo creamos.
  crearLabel();
});
<!-- Añadimos el css de Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<form>
  <div id="field-container" class="form-group row">
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Introduzca su e-mail">
    </div>
  </div>
  <div id="button-container" class="form-group-row">
    <div class="col-sm4">
      <button type="button" id="insertarLabel" class="btn btn-primary mx-4">Insertar Label</button>
    </div>
  </div>
</form>

3
  • e intentado con eso pero no funciona, me genera el label, pero si id y sin clase
    – Drake
    Commented el 29 mar. 2020 a las 1:11
  • deberia funcionar, mira este codepen codepen.io/fernando143/pen/mdJaoXM?editors=1111 Commented el 29 mar. 2020 a las 1:28
  • muchas gracias me a ayudado mucho, encontre el error al analizar tu codigo, muchas gracias @fernando Azarías
    – Drake
    Commented el 30 mar. 2020 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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