0

Hola chicos estoy haciendo un ejercicio, donde se maneja DOM, tengo recorridos todos los articulos, pero no se como añadirle al inicio de la cabecera, dicho elemento, alguna idea? gracias !

Recorrer los artículos y añadir al inicio de la cabecera el número de cualquier texto (1 - Cualquier texto... )

 var articulos = document.getElementsByTagName('article');
    for (var i = 0; i < articulos.length; i++) {
        alert("Estos son los articulos "+i+" ! " );
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Una web cualquiera</title>
        </head>
    <body>
        <h1 id="titulo">DOM</h1>
        <section id="noticias">
            <div class="fila">
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
            </article>
            </div>
            </section>
    </body>
    </html>
   

1 respuesta 1

1

Prueba con lo siguiente

 const noticias = [{title:"Lorem ipsum", desc:"dolor sit amet...."},{title:"Lorem ipsum", desc:"dolor sit amet...."},{title:"Lorem ipsum", desc:"dolor sit amet...."}]

 const articulos = document.getElementsByTagName('article');
    for (let i = 0; i < articulos.length; i++) {
        articulos[i].innerHTML = "<h3>" + i +
"-" +noticias[i].title+"</h3><p>"+noticias[i].desc+"</p>";
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Una web cualquiera</title>
        </head>
    <body>
        <h1 id="titulo">DOM</h1>
        <section id="noticias">
            <div class="fila">
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
            </article>
            </div>
            </section>
    </body>
    </html>
   

Creamos un array que contenga objetos donde almacenaremos información: Título, descripción; por cada <article> le pondremos dicho título y dicha descripción, el título tendrá el número actual en la posición del array.

Solución 2

Puedes usar querySelector, a continuación la solución:

 const noticias = [{title:"Lorem ipsum", desc:"dolor sit amet...."},{title:"Lorem ipsum", desc:"dolor sit amet...."},{title:"Lorem ipsum", desc:"dolor sit amet...."}]

 const articulos = document.getElementsByTagName('article');
    for (let i = 0; i < articulos.length; i++) {
        articulos[i].querySelector("div:first-child").innerHTML = noticias[i].title;
articulos[i].querySelector(".cuerpo").innerHTML = noticias[i].desc
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Una web cualquiera</title>
        </head>
    <body>
        <h1 id="titulo">DOM</h1>
        <section id="noticias">
            <div class="fila">
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                </article>
                <article>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
                    <div class="cuerpo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
            </article>
            </div>
            </section>
    </body>
    </html>
   

Usa querySelector para referirte a elementos con selectores de CSS. querySelector regresará solo el primer elemento con dicho selector, si buscas obtener todos usa querySelectorAll, este método te devolverá todos los elementos en un array.

7
  • oh gracias @anythingg enseguida lo pruebo ! Commented el 2 ene. 2021 a las 12:16
  • la idea es buena, pero me sustituye el texto, y lo que tiene que hacer es crear el nodo la inicio de la cabecera sin modificar el resto y sin que desaparezca Commented el 2 ene. 2021 a las 12:27
  • 1
    Esto tiene una solución fácil, usa querySelector, te doy dicha solución en unos momentos.
    – Rodrigo
    Commented el 2 ene. 2021 a las 12:28
  • oki muchas gracias ! Commented el 2 ene. 2021 a las 12:28
  • 1
    Prueba con la Solución 2 ¿Es lo que buscabas?
    – Rodrigo
    Commented el 2 ene. 2021 a las 12:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.