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 ?
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.
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.
@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.