javascript innerhtml не изменяет содержимое исходного кода - PullRequest
Новая
       12

javascript innerhtml не изменяет содержимое исходного кода

3 голосов
/ 17 июня 2011

Я не знаю, как это решить.Я хочу изменить исходный код (DOM) для некоторого события, например:

script: 

<script type="text/javascript">
function ChangeText(){
     document.getElementById("p1").innerHTML="New text!";
}
</script>

html: 

<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()" value="Change text" />

хорошо, это работает нормальнокогда я нажимаю на кнопку.но когда я просматриваю исходный код, он все равно выглядит так: 

<html>
    <body>
        <p id="p1">Hello world!</p>
        <input type="button" onclick="ChangeText()" value="Change text" />
    </body>
</html>

вместо: 

<html>
    <body>
        <p id="p1">New text!</p>
        <input type="button" onclick="ChangeText()" value="Change text" />
    </body>
</html>

Ответы [ 4 ]

7 голосов
/ 17 июня 2011

Ваш исходный код не изменяется.

Только DOM

Так что, если вы используете firebug или chrome, вы можете использовать inspect element, чтобы увидеть изменения.

См. Здесь: http://jsfiddle.net/maniator/eVw7Y/ (это на твоем примере)

3 голосов
/ 17 июня 2011

view source показывает только исходный код, который был доставлен в браузер. Он не показывает загрузку исходной страницы POST. Таким образом, вы не увидите ничего отрендеренного JS (поскольку JS не меняет исходный файл с сервера ... он просто меняет DOM в браузере).

Чтобы увидеть это, вам нужно установить что-то вроде FireBug, который позволит вам view rendered source, который будет отражать все изменения, сделанные в DOM через JS.

1 голос
/ 17 июня 2011

Используя Firefox, установите панель инструментов веб-разработчика. Затем в разделе «Просмотр источника» нажмите «Просмотреть созданный источник».

Используя Firefox с установленным Firebug или Google Chrome, щелкните правой кнопкой мыши документ и выберите «Проверить элемент». На вкладке HTML вы можете сразу же увидеть обновление исходного кода при изменении DOM.

В IE вы также можете установить панель инструментов веб-разработчика и следовать приведенным выше инструкциям.

0 голосов
/ 18 мая 2015

Помимо решений, основанных на уже опубликованных расширениях и пояснениях Firefox, вы также можете получить исходный код после изменений Javascript, набрав его в своем браузере: 

javascript:document.write("<xmp>"+document.documentElement.innerHTML+"</xmp>");

Убедитесь, что у вас есть часть javascript:, если вы используете Копировать / Вставить. Я проверял это в Chrome и IE11 (Windows 7). В некоторых браузерах (например, Apple Safari) может потребоваться включить параметр «Разрешить JavaScript в адресной строке».

Когда вы выбираете «View Source», вы просматриваете HTML (не DOM) как прямой ответ HTTP-запроса к серверу (до загрузки любого Javascript). DOM, с другой стороны, представляет собой ту же структуру HTML, которая была изменена JS. Больше информации здесь: https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html

...