1

Si queremos crear un botón en HTML, es necesario un código similar a:

<input type="submit" value="Numero parrafos" id="num_parrafos" name="Numero Parrafos"/>

¿Cómo se trasladaría el código a jQuery o a Javascript? Para no tener la necesidad de modificar el código HTML. Simplemente crearlo desde un archivo externo .js que será llamado en el head del HTML entre las etiquetas <script>...</script>

Código Javascript: ¿es correcta la creación?

var boton = document.createElement("button");
boton.type = "button";
document.body.appendChild(boton);

¿Y si tenemos el botón dentro de una etiqueta global <form> al ser un formulario debería ser: "document.body.form.appendChild(boton)" o siempre hay que hacer referencia al body con "document.body.appendChild(boton)"?

4
  • 1
    Siendo el programador flojo que soy, haría una variable de string así var boton = $('<input type="submit" value="Numero parrafos" id="num_parrafos" name="Numero Parrafos"/>)' y daría append $('body').append(boton) esto claro solo contestaría a tu pregunta en específico sobre ese botón que pones de ejemplo, para hacer una creación ya serían más líneas de código dependiendo de cómo quieras crear tus botones.
    – Yikarus
    el 3 jun. 2017 a las 14:22
  • 1
    Cuida porque el botón que estás creando es una etiqueta <button y en tu ejemplo tu botón es un <input que actúa de botón. el 3 jun. 2017 a las 14:24
  • Yendo directo a tu pregunta, no siempre tienes que hacer referencia al body. Si usas vanilla JavaScript puedes seleccionar el elemento en en cual quieres agregar el botón mediante getElementById (entre otros) o querySelector. Con jQuery es más sencillo: $('#elemento').append(boton).
    – gugadev
    el 3 jun. 2017 a las 14:29
  • Complementando el comentario de Gustavo igual puede usar $('#elemento').prepend(boton); te lo comento porque append lo agrega al final de los elementos que contenga el elemento al cual lo añades y prepend lo añade al principio de los elementos que contenga el elemento en cuestión, esto es útil saberlo de principio o al menos para mi es útil. :)
    – M. Gress
    el 3 jun. 2017 a las 16:21

2 respuestas 2

1

Es muy facil mira, lo que haces es guardar tu boton en una variable asi:

var button = '<input type="submit" value="Numero parrafos" id="num_parrafos" name="Numero Parrafos"/>';

Despues lo que haces es que con Jquery insertas el boton al final del formulario con la funcion append() asi:

$('form').append(button);

Al final te va a quedar tu código asi:

var button = '<input type="submit" value="Numero parrafos" id="num_parrafos" name="Numero Parrafos"/>';
$('form').append(button);

Tambien puedes ponerle alguna clase o ID a tu form para referenciarlo de la siguiente forma:

$('#formID').append(button); o $('.formClass').append(button);

te dejo la documentación aqui:

Append Jquery: Documentación

Saludos

1
function crearElemento(elemento, identificador, clase, texto, ruta, valor) {
    item = document.createElement(elemento);
    if (identificador !=='__'){ item.id = identificador; }
    if (clase !=='__') { item.className = clase; }
    if (texto !=='__') { item.innerText = texto; }
    if (ruta !== '__') { item.dataset.cargarVista = ruta; }
    if (valor !== '__') { item.value = valor; }
    return item;
}
btn = crearElemento('button','num_parrafos','agrega tus clases','Numero parrafos','__','__');
body = document.body;
body.appendChild(btn);

Creo que este fragmento de código te podría servir. Puedes agregar mas atributos a la función si gustas.

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.