New question

Question:

Date: 18-04-2019 20:37:13 (In Spanish)

Hacer un bucle de codigo html5 con javascript o jquery o smarty.[Resolved]

Hola necesito crear un bucle for que itere 10 veces, pero el codigo que quiero que se itere es el siguiente

<div class="photo"> 				
 				<center><label for="foto">Foto</label></center>
 				
 				<div class="prevPhoto">
 					<span class="delPhoto notBlock">X</span>
 					<label for="foto"></label>
 				</div>
 				<div class="upimg">
 					<input type="file" name="imgInput" id="foto">
 				</div>
 				<div id="form_alert"></div>
 			</div><br>


tengo entendido que lo puedo hacer con javascript pero desconosco como hacerlo. este codigo lo ocupo para agregar 10 imagenes al servidor. algo asi como lo hace mercadolibre al crear una publicacion.
lo mas facil seria repetir el codigo 10 veces pero no es lo correcto ya que repetiria codigo.
gracias por su ayuda.
Tags: HTML - Javascript - JQuery - PHP - PHP Advanced - Smarty Votes: 0 - Answers: 1 - Views: 7 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 02-05-2019 08:01:12 ES6 añadió la posibilidad de agregar plantillas de texto:
    Las plantillas de cadena de texto (template strings) son literales de texto que habilitan el uso de expresiones incrustadas. Es posible utilizar cadenas de texto de más de una línea, y funcionalidades de interpolación de cadenas de texto con ellas.

    [fuente: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings]

    let cadena = `cadena de texto`;

    ya lo único que debes hacer si deseas repetir un bloque de html podrías por ejemplo insertarlo así:

    [Bloque HTML]
    <button>Crear HTML</button>
    <div id="temp"></div>


    Bloque CSS
    .bloque{
      padding-left: 1rem;
      border-bottom: 1px solid gray;
    }


    [Bloque Javascript]
    const btn = document.querySelector('button');
    var temp = document.querySelector('#temp');
    
    btn.addEventListener('click', function(){
      for(var i=0; i<5; i++)
      {
        temp.innerHTML += `<div class="bloque">
    <h1>prueba de plantilla ${i+1}</h1>
    <h3>Subtítulo ${i+1}</h3>
    <p>Prueba de texto ${i+1}</p>
    <div>`
      };    
    });


    Nota: Tener en cuenta que la plantilla van entre comillas que son tildes invertidas ( ` ` ).
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com