JavaScript DOM Spreminjanje HTML

HTML DOM omogoča JavaScript‑u spreminjanje vsebine, atributov in strukture elementov. Najpreprostejši način je uporaba lastnosti innerHTML, ki zamenja celotno vsebino elementa. HTML DOM omogoča JavaScript-u spreminjanje vsebine HTML elementov. Za posodobitev posameznih atributov (npr. src, href, value) uporabimo neposredno dodelitev. Če želimo v dokument vstaviti novo vsebino med nalaganjem, je na voljo document.write(). V nadaljevanju so prikazani trije osnovni primeri – spreminjanje besedila, menjavanje slike in dinamično pisanje novega odstavka.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM – spreminjanje HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 16px;
        }
        button {
            margin: 6px 0;
            padding: 6px 12px;
            font-size: 14px;
        }
        .box {
            border: 1px solid #ddd;
            padding: 12px;
            margin-top: 12px;
        }
        pre {
            padding: 8px;
            border: 1px solid #ccc;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>JavaScript DOM – spreminjanje HTML</h1>

    <!-- 1. SPREMENI VSEBNINO (innerHTML) -->
    <div class="box" id="boxText">
        <p>To je izvirni odstavek.</p>
        <button id="btnInnerHTML">Spremeni vsebino (innerHTML)</button>
    </div>

    <!-- 2. SPREMENI ATRIBUT (src) -->
    <div class="box" id="boxImg">
        <img id="slika" src="/demo/narava4.png" alt="Narava" width="450">
        <br>
        <button id="btnChangeSrc">Zamenjaj sliko (src)</button>
    </div>

    <!-- 3. DINAMIČNO PISE (document.write) -->
    <div class="box" id="boxWrite">
        <button id="btnWrite">Dodaj nov odstavek (document.write)</button>
    </div>

    <pre id="log"></pre>

    <script>
        // 1. innerHTML-
        document.getElementById("btnInnerHTML").onclick = function () {
            const box = document.getElementById("boxText");
            box.innerHTML = "<p><strong>Vsebina je bila spremenjena z innerHTML!</strong></p>"
                           + "<button id=\"btnInnerHTML\">Spremeni vsebino (innerHTML)</button>";
            // Ponovno vežemo dogodek, ker smo prepisali celotno strukturo
            document.getElementById("btnInnerHTML").onclick = arguments.callee;
            document.getElementById("log").textContent = "innerHTML je bil posodobljen.";
        };

        // 2. sprememba atributa
        document.getElementById("btnChangeSrc").onclick = function () {
            const img = document.getElementById("slika");
            img.src = "/demo/narava7.png";
            document.getElementById("log").textContent = "Atribut src je bil spremenjen.";
        };

        // 3. document.write
        document.getElementById("btnWrite").onclick = function () {
            // document.write deluje le med fazo razčlenjevanja; zato ga uporabimo v setTimeout,
            // da simuliramo “dinamično” pisanje po kliku.
            setTimeout(() => {
                document.write("<p style='margin: 12px 0;'><em>Nov odstavek, ustvarjen z document.write()</em></p>");
            }, 0);
        };
    </script>
</body>
</html>

REZULTAT

Sprememba vsebine elementa	Uporabimo `innerHTML` na izbranem elementu.	Glej primer
Sprememba vrednosti atributa	Direktno nastavimo želeni atribut (npr. `src`, `href`).	Glej primer
Dinamično ustvarjanje HTML‑vsebine	Med nalaganjem strani uporabimo `document.write()` za takojšen izpis.	Glej primer