0

Estoy haciendo un metodo que me cree nuevos elementos HTML con JS y necesito que cuando agregue un campo llamado notas me lo inserte siempre al final.

Este es todo mi codigo

 <script>
        function agregar() {
            let campos = document.createElement('div');
            campos.innerHTML = `
                <br>
                <center><div class="duplicate" id="duplicate">
            <h3>Hora Requerida</h3>
            <input type="date" name="" id="">
            <input type="text" class=""> <br><br>
            <input onclick="agregar()" type="button" value="Agregar nueva hora">

        </div></center>

        <br><br>

        <center><div class="anotaciones" id="anotaciones">
            <h2>Notas por Agregar</h2>
            <textarea class="area" name="" id="" cols="30" rows="10"></textarea> <br><br>
            <input type="button" onclick="notas()" value="Agregar más notas">
        </div></center>
                <br>
            `;

            document.getElementById('duplicates').appendChild(campos);
        }
    </script>

    <script>
        function notas(){
            let notas = document.createElement('div');
            notas.innerHTML = `
                <br>
                <center><div class="anotaciones" id="anotaciones">
            <h2>Notas por Agregar</h2>
            <textarea class="area" name="" id="" cols="30" rows="10"></textarea> <br><br>
            <input type="button" onclick="notas()" value="Agregar más notas">
        </div></center>
                <br>
            `;

            document.getElementById('notas').appendChild(notas);
        }
    </script>
 <div class="container" id="container">
        <center><div class="duplicate" id="duplicate">
            <h3>Hora Requerida</h3>
            <input type="date" name="" id="">
            <input type="text" class=""> <br><br>
            <input onclick="agregar()" type="button" value="Agregar nueva hora">

        </div></center>
        <br>
        <center><div class="anotaciones" id="anotaciones">
            <h2>Notas por Agregar</h2>
            <textarea class="area" name="" id="" cols="30" rows="10"></textarea> <br><br>
            <input type="button" onclick="notas()" value="Agregar más notas">
        </div></center>
        <br>
    
        <div class="notas" id="notas">

        </div>

        <div class="duplicates" id="duplicates">

        </div>



    </div>

El problema es que cuando duplico todo el formulario, el me lo crea pero quiero agregar una nota nueva a ese usuario, pero la inserta arriba y no siempre al final. Entonces siempre que se añade una nueva nota me queda arriba del formulario y no al final.

2
  • utiliza insertAdyacentHTML() con la opcion beforeend, que lo que hace es poner dentro del un elemento luego de su ultimo hijo, si se loo haces al body ya lo tienes al final Commented el 11 may. 2022 a las 17:35
  • 1
    por cierto, <center> no es una etiqueta valida Commented el 11 may. 2022 a las 17:38

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.