основной вопрос сценариев ... динамически изменять содержимое div?

Question

Мне интересно, что может быть самым простым подходом к динамическому изменению содержимого элемента div "caption", чтобы отразить информацию, соответствующую конкретному уменьшенному изображению / ссылке в галерее изображений.

Если быть более точным, если вы посетите эту ссылку - которая показывает потрясающий сценарий масштабирования Seadragon, кстати - я хотел бы иметь небольшую подпись под изображением, которое изменяет (текстовый) контент, когда пользователь нажимает на разные ссылки выше; возможно, вытащить текст из атрибута alt или title и поместить в пустой div?

В моем случае я буду использовать миниатюры вместо текстовых ссылок, поэтому, щелкнув эти изображения, пользователь одновременно запустит событие Seadragon "switchTo" и заполнит пустой div соответствующим содержимым.

спасибо за любые указания здесь.

Answer 1

Если у вас есть идентификатор div, самый простой способ - использовать innerHTML:

document.getElementById(id).innerHTML = "text";

Это хорошо для более простых случаев, например, для замены всего текста в div.Если вы хотите сделать что-то более сложное, например, поместить в элемент div другие html-элементы, этот метод не лучший выбор.

Если вы хотите добавить html-элемент в тег div, вам следует избегать innerHTML.Если у вас есть, скажем, переменная img, которая является тегом img, то используйте ее, чтобы добавить ее в div:

document.getElementById(id).appendChild(img);

Если вы хотите сделать что-то более сложное, чем это, вам, вероятно, следуетрассмотрите возможность использования хорошего фреймворка, такого как jQuery - это может быть слишком много для чего-то подобного, но если вы планируете делать что-то еще, то фреймворк стоило бы использовать., это можно сделать с помощью некоторых из следующих функций:

var div = $("#id");// jQuery uses CSS selectors to get elements.
div.append("New content");// Puts the new content at the end.
div.empty();// Gets rid of everything inside the div.
div.append(element);// You can also append elements.

// For example, you can create and append an image to the div:
var img = $("<img>");
img.attr("src", "images/something.png");
div.append(img);