Estoy tratando de crear un nuevo elemento e insertarlo dentro de document.querySelector('.content'); en el índice específico? mi código simple a continuación.
const container = document.querySelector('.content'); var counter = 0; var p = document.createElement('p'); p.textContent = "INSERT NEW" var buttonOne = document.createElement('button'); buttonOne.className = "btnClass"; buttonOne.innerText = "Insert"; buttonOne.onclick = function() { var buttonTwo = document.createElement('button'); buttonTwo.className = "btnClass"; buttonTwo.innerText = "new"; var nodes = Array.prototype.slice.call(document.getElementById('container').children); var index = nodes.indexOf(this); var c = document.createElement('p'); c.textContent = "inserted new p"; **container.append(c, buttonTwo, index++); <-- something like this** }; for (let i = 0; i < 5; i++) { var p = document.createElement('p'); p.textContent = "Index" + " " + i container.append(p, buttonOne); }por ejemplo; si tengo 10 botones. Haga clic en el tercero, debe AGREGAR un nuevo elemento en el cuarto y empuja el resto. ¿Es posible? o alguna otra opcion?
Use Element.insertAdjacentHTML() podría hacer el trabajo por usted.
El método insertAdjacentHTML() de la interfaz Element analiza el texto especificado como HTML o XML e inserta los nodos resultantes en el árbol DOM en una posición específica.
No sé cómo realmente desea implementar su código, pero este es un ejemplo en el que reemplazo todo su índice p en a etiqueta y cuando presiona cualquier button , insertará un elemento después de ese elemento específico.
const container = document.querySelector('.content'); var counter = 0; var p = document.createElement('p'); p.textContent = "INSERT NEW" var buttonOne = document.createElement('button'); buttonOne.className = "btnClass"; buttonOne.innerText = "Insert"; buttonOne.onclick = function() { var buttonTwo = document.createElement('button'); buttonTwo.className = "btnClass"; buttonTwo.innerText = "new"; var nodes = Array.prototype.slice.call(document.getElementById('container').children); var index = nodes.indexOf(this); var c = document.createElement('p'); c.textContent = "inserted new p"; }; for (let i = 0; i < 5; i++) { var p = document.createElement('button'); p.className = 'index' p.textContent = "Index" + " " + i container.append(p, buttonOne); } const allindex = document.querySelectorAll('.index') allindex.forEach((i, index) => { i.addEventListener('click', () => { allindex[index].insertAdjacentHTML("afterend", "<button>newbutton</button>") }) }) <div class='content'></div>