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

Question

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

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

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

спасибо за любое руководство здесь.

Answer 1

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

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

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

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

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

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

Если вы хотите сделать это с помощью 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);