cuando vi este ejemplo, usó el método getElementsByTagName() para traer todas las etiquetas de anclaje y luego usó el índice [0] para traer el primer elemento dentro de esta HTMLCollection. asignarlo a la variable x. si hago console.log(x) obtendré lo que se espera de la primera etiqueta de anclaje en mi HTML DOM. pero si asigno esta X a un párrafo usando innerHTML , el resultado mostrará el valor href que está dentro del ancla, esperaba agregar la etiqueta de ancla completa como elemento HTML y mostrar dentro del párrafo el contenido que se encuentra en este ejemplo. Hola Mundo'. ¿Alguna explicación de por qué sucede esto? Gracias.
const x = document.getElementsByTagName('a')[0]; console.log(x); // will print out the anchor tag element document.getElementById('demo').innerHTML = x; // will add the href attribute value of the anchor only, But I expected that I will get the text 'hello world' <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.com/html/">hello world</a> <a href="https://www.w3schools.com/css/">Welcome</a> <p id="demo"></p> </body> </html>Cuando asigna x a innerHTML , se convierte en una cadena. Convertir un elemento DOM en una cadena no devuelve el HTML completo del elemento; en la mayoría de los casos, devuelve una cadena como [object HTMLDivElement] , pero los anclajes anulan esto y devuelven el valor href (consulte HTMLAnchorElement.toString() .
Para obtener el HTML completo de un elemento, puede usar la propiedad outerHTML .
const x = document.getElementsByTagName('a')[0]; console.log(x); // will print out the anchor tag element document.getElementById('demo').innerHTML = x.outerHTML; // will add the href attribute value of the anchor only, But I expected that I will get the text 'hello world' <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.com/html/">hello world</a> <a href="https://www.w3schools.com/css/">Welcome</a> <p id="demo"></p> </body> </html>HTML tag válidas y deja el contenido como está. Entonces, aquí la etiqueta <a> se convierte en una etiqueta que no puede imprimir el agujero <a href="link">text<a/a> , solo imprime texto como una etiqueta de anclaje. para más información visite esta página .