Javascript Lezione 58

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>DOM</title>

    <style>
        img {width: 50px; height: 50px;}
        td, #img1 {border: 1px solid black;}
        .testoRosso {color: red;}
        .sfondoGiallo {background-color: yellow;}
        .font35 {font-size: 35px;}
        .font25 {font-size: 25px;}
        span {font-size: 25px;}

        p {margin: 5px; background-color: lightgray;}
    </style>

</head>
<body>

    <div id='div1'>
        <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro1.png">
                   <img id="img2" src="teatro2.png">
        </p>
    </div>

    <div id='div2'>
        <a href="https://www.bbc.com">sito bbc</a>
    </div>

    Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
    Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
    Roma   <input type="checkbox" name="capitali" id="cb3">
    Madrid <input type="checkbox" name="capitali" id="cb4"> <br> <br>
    Luogo nascita <input type="text" id="localita"> <br> <br>
    Lingua madre <input type="text" id="lingua">
    <br>
    <br>

    <select id="elenco1">
        <option id="op1">1</option>
        <option id="op2">2</option>
        <option id="op3">3</option>
    </select>

    <br><br>

    <select id="elenco2">
        <option id="opA">A</option>
        <option id="opB">B</option>
        <option id="opC">C</option>
    </select>

    <p id="parent">esempio <span id='test'>testo nello span</span> io termino il paragrafo</p>


    <script>

        //BUG con innerHTML
        // const test = document.getElementById("test");
        // test.style.color = "red"; //OK

        // document.getElementById("parent").innerHTML += " <b>aggiunta</b>";

        // test.style.color = "green"; //2 Sorpresa ... rimane ROSSO!


        //posizioni: beforebegin, afterbegin, beforeend, afterend

        // beforebegin <p id="p1" class="testoRosso sfondoGiallo"> AFTERBEGIN primo paragrafo BEFOREEND</p> afterend

        //un paragrafo prima di p1
        const p1 = document.getElementById('p1');
        p1.insertAdjacentHTML('beforebegin', '<p> prima di p1 </p>');

        //un paragrafo dopo p1
        p1.insertAdjacentHTML('afterend', '<p> dopo p1 </p>');

        //uno span all'inizio del paragrafo p1
        p1.insertAdjacentHTML('afterbegin', "<span style='background-color: lightgreen;'> SPAN </span>");

        //uno span alla fine del paragrafo p2
        p1.insertAdjacentHTML('beforeend', "<span style='background-color: lightgreen;'> SPAN </span>");

        //una option come prima voce della select
        const elenco = document.getElementById('elenco1');
        elenco.insertAdjacentHTML('afterbegin', '<option>0</option>');

        //una option come ultima voce della select
        elenco.insertAdjacentHTML('beforeend', '<option>4</option>');


        //spostamento di una option tra le due select
        document.getElementById('elenco2').
            insertAdjacentElement("afterbegin", document.getElementById('op1'));

        //eliminazione di un elemento spostandolo in un nuovo nodo poi mai inserito
        document.createElement('select').
            insertAdjacentElement("afterbegin", document.getElementById('op1'));

    </script>
</body>
</html>