Tengo un poco de código JS, que crea un nuevo elemento HTML personalizado. Necesito mover los elementos secundarios al nuevo elemento primario, que está dentro del elemento personalizado (necesito dos elementos debido al estilo), pero como los elementos colocados dentro de las etiquetas se crean primero, necesito que todos los elementos secundarios se muevan al último hijo de (ya creo el nuevo padre automáticamente). Nota: las soluciones de jQuery son aceptables.
Código:
connectedCallback() { this.setAttribute('class', 'e1') const e1 = document.createElement('div') e1.setAttribute('class', 'e-content') this.appendChild(e1) } class ce extends HTMLElement { constructor() { super(); } connectedCallback() { this.setAttribute('class', 'e1') const e1 = document.createElement('div') e1.setAttribute('class', 'e-content') this.appendChild(e1) } } customElements.define('custom-elem', ce); <custom-elem> <p>A child of custom-elem, which should go in the generated child of custom-elem (div with class e-content).</p> </custom-elem>Parece que agregar dos declaraciones (probablemente podría reducirse a una) al final de la función connectedCallback debería cubrirlo:
class ce extends HTMLElement { constructor() { super(); } connectedCallback() { this.setAttribute('class', 'e1') const e1 = document.createElement('div') e1.setAttribute('class', 'e-content') this.appendChild(e1) var pElement = this.getElementsByTagName('p') e1.appendChild(pElement[0]) } } customElements.define('custom-elem', ce); <custom-elem> <p>A child of custom-elem, which should go in the generated child of custom-elem (div with class e-content).</p> </custom-elem> Utilice el inspector del navegador para ver que el elemento <p> se mueve dentro del elemento <div class="e-content"> .