JQuery DOM изменения не отображаются в представлении источника - PullRequest
Новая
       15

JQuery DOM изменения не отображаются в представлении источника

18 голосов
/ 22 декабря 2011

У меня здесь простой вопрос. Я знаю, что с помощью jQuery вы можете динамически добавлять элементы HTML в DOM, выполняя такие вещи, как 

$('').append('<p>Test</p>');

Но мой вопрос заключается в том, почему эти элементы фактически не отображаются визуально в коде (например, при просмотре исходного кода в браузере).

Пожалуйста, эксперты, дайте мне знать, почему. Спасибо

Ответы [ 5 ]

25 голосов
/ 22 декабря 2011

Первоначальный источник никогда не меняется.Меняется только DOM.

Вы можете увидеть HTML-визуализацию изменений DOM с помощью инструментов разработчика вашего браузера.

Вы должны знать, что когда вы манипулируете DOM, вы никогда не манипулируете HTML.HTML-визуализация, предлагаемая инструментами разработчика, представляет собой интерпретацию текущего состояния DOM.Фактической модификации разметки HTML нет.

7 голосов
/ 22 декабря 2011

Потому что View Source показывает только тот HTML-код, который был первоначально отправлен в браузер.Хотя есть способы увидеть измененный HTML - Firebug в Firefox, инструменты разработчика F12 в IE или Chrome.Выбор HTML-кода и щелчок правой кнопкой мыши по «View Selection Source» в Firefox также будут работать.

5 голосов
/ 22 декабря 2011

«Просмотр источника» показывает только источник, отправленный сервером в тот момент, когда браузер запросил определенную веб-страницу с сервера. Поэтому, поскольку эти изменения были сделаны на стороне клиента, они не отображаются в «Просмотр источника», поскольку они были сделаны после доставки исходной страницы.

Чтобы просмотреть исходный источник страницы, вы можете использовать представление Web Inspector в браузерах WebKit или Firebug в Firefox. Они отслеживают любые изменения в DOM и обновляют источник, который вы видите.

3 голосов
/ 30 января 2013

В инструменте веб-разработчика (дополнение Firefox) есть опция "View generated source", которая выдаст вам весь исходный код, созданный после внесенных вами изменений. 

view source->View generated source
0 голосов
/ 28 августа 2012

Бывают случаи, когда инструменты разработки в IE / Firefox / Chrome не поспевают за DOM.Это просто означает, что вы имеете дело с каким-то кодом, достойным джедая, или что Дарт Вейдер оставил его для отладки.

...