2

Este es mi codigo:

   const showPagMenu=()=>{
    let txt = `
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Anterior</a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">Siguiente</a>
        </li>
    </ul>`;

convierto el ul a un objeto

    let ulO=document.createElement("ul");
    ulO.className="pagination pagination-sm";
    ulO.innerHTML=txt;

Botones de la páginación

    let htO = document.createElement('li');
    let htS = document.createElement('span');
    htS.classList.add("page-link");

Insertamos texto dentro de un span y lo insertamos dentro de un li htS.innerText="Algo"; htO.append(htS)

Detectamos el segundo li del objeto ul e insertamos el nodo li con el span

    let nd=ulO.insertBefore(htO, ulO.children[0].children[1]);
    return ulO; // too I cheked the variable nd.

}

Obtengo el siguiente error en consola: "Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node"

3
  • ¿Podrías explicar con breves palabras qué es lo que quieres lograr exactamente? Parecería que hay código redundante, que los tipos de elementos se sobre-escriben/desorganizan al manipular mal el código y que no usas los mejores métodos para lo que quieres. Parecería que el asunto es más simple, pero al partir de una lógica confusa todo se complica, por eso conviene volver al principio, explicando el problema.
    – A. Cedano
    el 4 abr. 2021 a las 17:25
  • Es cierto lo que dice nuestro amigo A. Cedano, para poder ayudarte deberías de explicar mejor que es lo que quieres hacer exactamente el 4 abr. 2021 a las 17:45
  • Estoy tratando de hacer una función la cual cree un menu de botones para una página de navegación, se recibe el numero de páginas y se crean pero el código aun no esta terminado el problema radica en que no puedo insertar un nodo de un objeto li con insert before el 4 abr. 2021 a las 18:41

2 respuestas 2

0

Lo 'resolví' de la siguiente manera:

 const showPagMenu=(pages)=>{
        // main Ul
        let ulObj = document.createElement('ul');
        ulObj.className='pagination pagination-sm';
        // li previous
        let liObj = document.createElement('li');
        let aObj = document.createElement('a');
        liObj.className='page-item';
        aObj.className='page-link';
        aObj.innerText="Anterior";
        liObj.append(aObj);
        // insert node to main ul
        ulObj.appendChild(liObj);
        // li next
        let liObj2 = document.createElement('li');
        let aObj2 = document.createElement('a');
        liObj2.className="page-item";
        aObj2.className="page-link";
        aObj2.innerText="Siguiente";
        liObj2.append(aObj2)
        // insert node to main ul
        ulObj.appendChild(liObj2);
        // Detect second node (li-next) for insert before the buttons
        let secondNode = ulObj.children[1];

        for (let i = 0; i < pages; i++) {
            let li=document.createElement('li');
            let span=document.createElement('span');
            li.className="page-item";
            span.className="page-link";
            //insert text
            span.innerText=i;
            li.append(span);
            ulObj.insertBefore(li,secondNode);
        }

        return ulObj;
   }

Si alguien puede ayudarme para poder reducir el código se lo agradecería^^ Lo que hice fue hacer toda la estructura desde 0 con constructores jvascript y asignándole las propiedades correspondientes en vez de poner el string html y después convertirlo a un objeto de javascrip.


Una representación visual del menú
0

Cuando tienes tareas repetitivas, lo mejor es crear una función, no solo te ayuda a reducir código, sino también a simplificar la lógica. En tu caso:

Todos los elementos del menú son li y deben tener una clase específica. Dentro hay otra etiqueta, puede ser enlace a o span y también se le debe asignar clase y texto; entonces solo debes crear una función que reciba esos parámetros para crear las etiquetas correspondientes, con sus atributos, y devolver el elemento.

Finalmente, si creas todos los elementos en orden (botón anterior, botones de números de página y botón siguiente), simplemente los agregas con .appendChild() y evitas complicar la lógica, ya no es necesario detectar elementos anteriores ni el uso de .insertBefore().

Una mejora en este fragmento de código es que puedes especificar el elemento que aparecerá activo al crear el menú, solo agregando un parámetro a la función showPageMenu() y una asignación ternaria para verificar si se debe asignar la clase active.

/**
 * Crear enlaces de paginación
 * @param (string) className       Clase para elemento de lista (li)
 * @param (string) insideTag       Etiqueta para elemento interno (enlace o span)
 * @param (string) insideClass     Clase para elemento interno
 * @param (string) text            Texto de elemento interno
 * @returns HTMLElement            Elemento de lista
 */
const menuItem = (className, insideTag, insideClass, text) => {
    // Crear elemento de lista y asignar clase
    let li = document.createElement('li');
    li.className = className;
    // Crear elemento interno, asignar clase y contenido
    let inTag = document.createElement(insideTag);
    inTag.className = insideClass;
    inTag.textContent = text;
    // Agregar elemento interno
    li.appendChild(inTag);
    // Devolver elemento de lista
    return li;
}
// Recibir un segundo parámetro para establecer enlace activo
const showPagMenu = (pages, current) => {
    // Asegurar que tenemos un valor adecuado
    if(!current || current < 1) {
        current = 1;
    } else if(current > pages) {
        current = pages;
    }
    // main Ul
    let ulObj = document.createElement('ul');
    ulObj.className='pagination pagination-sm';
    // Crear enlace "Anterior" y agregar a lista
    ulObj.appendChild(menuItem('page-item', 'a', 'page-link', 'Anterior'));
    // Páginas
    for(let i = 1; i <= pages; i++) {
        // ¿Es la página activa?
        let active = (current == i) ? ' active' : '';
        ulObj.appendChild(menuItem('page-item' + active, 'span', 'page-link', i));
    }
    // Siguiente
    ulObj.appendChild(menuItem('page-item', 'a', 'page-link', 'Siguiente'));
    return ulObj;
}

// Crear enlaces de página y activar el primer elemento (sin parámetro)
document.body.appendChild(showPagMenu(5));

// Crear enlaces de página y activar el segundo elemento
document.body.appendChild(showPagMenu(3, 2));

// Crear enlaces de página y activar el último elemento, incluso con parámetro inválido
document.body.appendChild(showPagMenu(8, 10));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

Ya te tocará aplicar otras mejoras como deshabilitar el botón "Anterior" cuando la página activa es la primera o el botón "Siguiente" cuando la página activa es la última.

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.