Actualmente, mi sitio web tiene la siguiente estructura:
<div class="aa"> <h2 class="bb">example</h2> </div>Y quiero crear un nuevo div y poner h2 dentro.
<div class="aa"> <div class="cc"> <--- <h2 class="bb">example</h2> </div> <--- </div>Intenté usar el código insertBefore como se muestra a continuación.
<script> const parent = document.querySelector('.bb'); const billingField1 = document.querySelector('.aa'); const newDiv = document.createElement('div'); newDiv.setAttribute('id', 'cc'); newDiv.style.cssText = 'Hi there'; parent.insertBefore(newDiv, billingField1); </script>Con este método, un nuevo elemento div se inserta solo con
<div class="cc"></div>Me pregunto si hay alguna manera de ponerlo.
Prueba esto
document.getElementByClassName('bb').innerHTML = '<div class=“cc”>' + document.getElementByClassName('bb').innerHTML + '</div>';Después de insertar el nuevo elemento, debe convertir el elemento antiguo en un elemento secundario.
const parent = document.querySelector('.aa'); const billingField1 = document.querySelector('.bb'); const newDiv = document.createElement('div'); newDiv.setAttribute('id', 'cc'); newDiv.style.cssText = 'Hi there'; parent.insertBefore(newDiv, billingField1); newDiv.appendChild(billingField1); <div class="aa"> <h2 class="bb">example</h2> </div> También se intercambiaron los selectores para parent y billingField1 .