dynamiczne zmienianie tresci np.diva

0

witam. czy przy pomocy html, php, css (cokolwiek), jest mozliwa zmiana zawartosci diva ? np. mam div o id=XX, i czy klikajac w jakis link albo button moge zmienic zawartosc XX ?

0

Tak. Można to łatwo zrobić za pomocą JavaScriptu. Referencję do diva można pobrać za pomocą metod DOM (jeśli div ma ID, to za pomocą document.getElementById), następnie można przypisać wartość do własności innerHTML, co ustawi zawartość diva. To wszystko możesz zrobić w zdarzeniu click jakiegoś łącza. Z JavaScriptem to kaszka z mleczkiem.

0

JavaScript:

<!DOCTYPE html>
<html>
    <head>
        <title>Strona testowa 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function change_text(element_id, text) {
                var element = document.getElementById(element_id);
                while(element.childNodes.length > 0) {
                    element.removeChild(element.firstChild);
                }
                element.appendChild(element.ownerDocument.createTextNode(text));
            }
            
            function change_text2(element_id, text) {
                var element = document.getElementById(element_id);
                element.textContent = text;
            }
        </script>
    </head>
    <body>
        <div id="panel">I'm a text node!</div>
        
        <textarea id="text"></textarea>
        <input type="button" value="Method 1" 
               onclick="change_text('panel', document.getElementById('text').value)" />
        <input type="button" value="Method 2" 
               onclick="change_text2('panel', document.getElementById('text').value)" />
    </body>
</html>

Z tym, że pierwsza metoda jest nieco bardziej przenośna. (IE6 chyba nie obsługuje textContent );) innerHTML i innerText też pewnie zadziałają, ale nie są częścią rekomendacji W3C i ich implementacja nieco się różni (albo przynajmniej różniła) między przeglądarkami.

0

@Azrael_Valedhel:
Użycie innerHTML będzie jak najbardziej na miejscu w zdecydowanej większości przypadków -- jestem przekonany, że w tym też. innerHTML jest dobrze wspierany przez różne przeglądarki i w HTML-u (nie: w XHTML-u) można go spokojnie używać. W3C również wzięło pod lupę tę właściwość; obecnie jest ona standaryzowana: http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml . Wsparcie jest jednak od długiego czasu dobre. Dodatkowo, użycie innerHTML jest przeważnie sporo wydajniejsze od innych metod, co akurat w tym wypadku nie ma prawdopodobnie znaczenia.

1 użytkowników online, w tym zalogowanych: 0, gości: 1