Javascript Lezione 59

<!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;}
        .grigioScuro {background-color: darkgray; font-weight: bold;}
    </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">
                   <a href="#">link <span id='sp' style="color: red;"> disabilitato </span></a>
        </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>

        let p = document.createElement('p');

        //VALORI / CONTENUTO
        p.textContent = 'paragrafo DAVANTI';

        //STILI
        p.style.color = 'blue';
        p.classList.add('grigioScuro');

        //ATTRIBUTI
        p.id = 'pBefore';

        // document.getElementById('p1').before(p,
        //    p.cloneNode(true),
        //    document.getElementById('img2').cloneNode(), "una stringa" );


        //document.getElementById('p1').insertAdjacentElement('beforebegin', p);

        // p = p.cloneNode(true);
        // p.textContent = "paragrafo AFTER";
        // document.getElementById('p1').after(p);

        const o = document.createElement('option');
        o.textContent = "0";
        o.value = "0";
        //document.getElementById('elenco1').append(o);
        //document.getElementById('elenco1').prepend(o);

        // const sp = document.getElementById('sp');
        // p.style.color = sp.style.color;
        // const div = sp.closest('div').prepend(p);

        const o2 = document.createElement('option');
        o2.textContent = "0.5";
        o2.value = "0.5";

        //document.getElementById('op1').replaceWith(o,o2);

        document.getElementById('elenco1').replaceChildren(o,o2);

        document.getElementById('elenco1').remove();


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