Estoy tratando de modificar la sección del cuerpo en función de tagName , usando JavaScript. Pero mi página web se carga infinitamente cuando uso el método insertBefore() para insertar una etiqueta antes de la etiqueta <h1> . Este problema no ocurre cuando trato de insertar antes de otros elementos. Soy nuevo en JS, por favor ayúdame.
Este es mi HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>Para 1</p> <p>Para 2</p> <h1 id="head1">Para 3</h1> <p id="parax"></p> <div id="div1"> <p>Hello</p> </div> <ul id="mylist1"> <li>Script</li> <li>deep learning</li> <li>software testing</li> <li>Python programming</li> <li>Database systems</li> </ul> <p id="firstp">I was supposed to be first.</p> <input type="button" onclick="myFunc()"> </body> <script type="text/javascript"> var cn=document.body.children; for(var i=0;i<cn.length;i++){ if(cn[i].tagName=="DIV"){ var h1 = document.createElement("H1"); var text = document.createTextNode("h1 tag inserted"); h1.appendChild(text); cn[i].appendChild(h1); } else if(cn[i].tagName=="UL"){ var lis= cn[i].childNodes; for(var j=0;j<lis.length;j++){ if(lis[j].innerHTML=="Python programming") lis[j].innerHTML="machine learning"; } } else if(cn[i].tagName=="H1"){ var p=document.createElement("P"); var text=document.createTextNode("New para inserted before"); p.appendChild(text); document.body.insertBefore(p,cn[i]); } else document.write(); } </script> </html>En esta línea estoy enfrentando un problema (creo que sí):
document.body.insertBefore(p,cn[i]);Porque tú con este código de línea:
document.body.insertBefore(p,cn[i]); aumente el número de document.body.children y cada vez que inserte child usted y el número de body children y nunca llegue al último índice.
por favor agregue esto para ver:
document.body.insertBefore(p,cn[i]); alert(document.body.children.length); // add this line after insertBefore ver cada alerta muestra el número de document.body.children se incrementó
Gracias al Sr. @foad, obtuve la respuesta a mi pregunta. En realidad, el método insertBefore() está dentro de un bucle for . Entonces, en cada iteración, se agrega una nueva etiqueta al cuerpo y la length del cuerpo aumenta en 1. Esto provocó la carga infinita.
La corrección es agregar una declaración de interrupción después del método insertBefore :
document.body.insertBefore(p,cn[i]); break; Esto termina el bucle después de agregar la etiqueta <p> antes de la etiqueta <h1> .