Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211

    uso di <br> con .innerHTML

    Con il codice che segue vorrei mostrare la lista dei nodi figli di <body> usando innerHTML.
    Usando innerHTML la prima volta, dopo il titolo, "<br>" è riconosciuto come <tag> e manda il testo a capo.
    Usando innerHTML più volte, nel ciclo, "<br>" non è riconosciuto come <tag> e viene copiato come testo.
    Perché e come si può ovviare? Grazie


    lanvoel


    <code>
    <!doctype html>
    <html>
    <body>


    <div id="div1" style="border:3px solid red; width:300px; height:400px;"></div>


    <script>
    div1.innerHTML="titolo: body.childNodes<br><br>" ;
    let i=0;
    for (i = 0; i <document.body.childNodes.length; i++) {
    div1.innerText += (i+1) + ") " + document.body.childNodes[i] + "<br>";
    }
    </script>


    </body>
    </html>
    </code>

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,660
    Fai attenzione, dentro il ciclo non hai mica usato innerHTML:
    codice:
    div1.innerText += ...
    Prova Forum HTML.it Toolset per una fruizione ottimale del Forum

    In arrivo Forum HTML.it Toolset v1.3.0 con nuove funzionalità

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Chiedo scusa, non l'avevo proprio notato, sono proprio stonato!
    Grazie KillerWorm

  4. #4
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,281
    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    Con il codice che segue vorrei mostrare la lista dei nodi figli di <body> usando innerHTML.
    Usando innerHTML la prima volta, dopo il titolo, "<br>" è riconosciuto come <tag> e manda il testo a capo.
    Usando innerHTML più volte, nel ciclo, "<br>" non è riconosciuto come <tag> e viene copiato come testo.
    Perché e come si può ovviare? Grazie
    Oltre a quanto ti ha suggerito KillerWorm, c'è un altro "errore": l'accesso al DOM va limitato il più possibile, soprattutto quando devi concatenare degli elementi in quel modo e fai uso di innerText o innerHTML.

    Nel tuo esempio, devi inizializzare tutto l'HTML che vuoi inserire all'interno di una stringa, all'interno del ciclo concatenare l'HTML alla stringa stessa, e solo alla fine - in una operazione unica - vai a impostare con innerHTML il markup che hai generato e memorizzato nella stringa.

    Con il tuo approccio, il browser deve fare parsing e modifica al DOM a ogni iterazione del ciclo, mentre con quello descritto sopra si fa un accesso unico.

    Il DOM è il "collo di bottiglia" più importante quando si programmano dinamicamente le pagine tramite JavaScript.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.