Muchos pueden preguntarse por qué en el deseo de ver si realmente se necesita. Si bien no es deseable, es para este caso de uso particular que no se detallará ya que no es relevante para la respuesta. Se logra fácilmente con una línea de JQuery pero, por desgracia, debe ser js simple e idealmente lo más corto y directo posible. Vea solicitudes similares en SO, pero muchas para moverse dentro de un div o con requisitos un poco más complejos.
Creó un ejemplo básico que funciona como se desea:
var contentDiv = document.querySelector('.c'); var anchorDiv = document.querySelector('.b'); contentDiv.after(anchorDiv); <div class="container"> <div class="a"> A </div> <div class="b"> B </div> <div class="c"> C </div> </div>Sin embargo, al hacerlo en el código real, aparece el error:
TypeError: null no es un objeto (evaluando 'contentDiv.after')
Si bien tener el script en la parte superior de la página puede causar eso, tenlo en la parte inferior, entonces, ¿hay algo más que pueda estar causando eso?
El código real que se usa es el siguiente en caso de que los nombres de clase específicos sean problemáticos:
<script> var contentDiv = document.querySelector('.product-description'); var anchorDiv = document.querySelector('.product-details__container'); contentDiv.after(anchorDiv); </script>También pensé que tal vez necesito un documento listo sobre eso. Así lo hizo:
<script> document.addEventListener('DOMContentLoaded', function () { var contentDiv = document.querySelector('.product-description'); var anchorDiv = document.querySelector('.product-details__container'); contentDiv.after(anchorDiv); }, false); </script>Pero mismo error. ¿Algunas ideas?
Si AJAX parte de la página, es posible que no TENGA ese elemento con esa clase en el momento en que se ejecuta el código
Pruebe esto para ver si finalmente funciona, entonces sabrá por qué
const swap = () => { const contentDiv = document.querySelector('.product-description'); const anchorDiv = document.querySelector('.product-details__container'); if (contentDiv && anchorDiv) contentDiv.after(anchorDiv); else { console.log({contentDiv},{anchorDiv}) setTimeout(swap,1000) } }; window.addEventListener('load', swap);