У меня есть простой вопрос. Я знаю, что с jQuery вы можете динамически добавлять HTML-элементы в DOM, делая такие вещи, как
$('').append('<p>Test</p>');
Но мой вопрос: почему эти элементы не отображаются визуально в коде (например, когда вы просматриваете источник в своем браузере).
Пожалуйста, эксперты, дайте мне знать, почему. Благодаря
Исходный источник никогда не изменяется. Изменяется только DOM.
Вы можете увидеть HTML-визуализацию изменений DOM с помощью инструментов разработчика браузера.
Вы должны знать, что когда вы манипулируете DOM, вы никогда не будете манипулировать HTML. Визуализация HTML, предлагаемая инструментами разработчика, представляет собой интерпретацию текущего состояния DOM. Нет фактической модификации разметки HTML.
Поскольку View Source показывает только HTML, который был первоначально отправлен в браузер. Есть способы увидеть измененный HTML, хотя Firebug в Firefox, F12 инструменты разработчика в IE или Chrome. Выбрав некоторый HTML и щелкнув правой кнопкой мыши "View Selection Source" в Firefox, также будет работать.
"Просмотр источника" показывает только источник, отправленный сервером, в тот момент, когда браузер запрашивал определенную веб-страницу с сервера. Поэтому, поскольку эти изменения были сделаны на стороне клиента, они не отображаются в "View Source", потому что они были сделаны после того, как была отправлена исходная страница.
Чтобы просмотреть исходный источник страницы, вы можете использовать представление Web Inspector в браузерах webkit или Firebug в Firefox. Они отслеживают любые изменения в DOM и обновляют источник, который вы можете видеть.
В инструменте веб-разработчика (Firefox addon) "View generated source" есть опция, которая даст вам весь исходный код, который создается после внесенных изменений.
view source->View generated source
Бывают случаи, когда инструменты разработчика в IE/Firefox/Chrome не укладываются в ваш DOM. Это просто означает, что вы имеете дело с каким-то кодом, достойным джедая, или что Дарт Вейдер оставил его там для отладки.