Что не так в передаче кода JS'ом в HTML?

Question

[Владимир]

Помогите, пожалуйста, понять, что происходит.
Кусочек кода HTML с включением PHP:

<div id="content" class="content"><?php include ( './pages/globals.php' ); ?></div>

Он подключает код из globals.php на страницу index.php.
Далее, я, в зависимости от выбранного пункта меню, хочу изменить подключаемый код. Для этого использую JavaScript:

$("#menu .nav-link").removeClass("active"); // удаляем атрибут active из всех пунктов меню
                var key_link = this.innerHTML; // получаем текст ссылки нажатого пункта меню
                var pages_link = pages[key_link]; // получаем ссылку элемента меню
                $(this).addClass("active"); // устанавливаем класс active нажатому пункту меню
                var include = "<div class='content'><?php include ( './pages/"+pages_link+".php'); ?></div>"; //формируем блок для замены
                var inContent = document.getElementById("content"); // получаем элемент по ID
                inContent.innerHTML = include; // заменяем элемент

JS-код выполняется, но происходит непонятное php-скрипт превращается в комментарий:
<!--?php include ( './pages/utilities.php'); ?-->
Пытался передавать $(".content").replaceWith(this.include);, экранировать в JS-коде тэги и знак вопроса - все впустую.
Вот почему JavaScript передает строку кода именно так и как с этим бороться?
Я не совсем уж отполированный чайник и понимаю, что JS работает в браузере, а PHP обрабатывается сервером, но мне кажется, что к описываемой ситуации это не относится.

Answer 1

[Stalker_RED]

Я не совсем уж отполированный чайник и понимаю, что JS работает в браузере, а PHP обрабатывается сервером, но мне кажется, что к описываемой ситуации это не относится.

Мне кажется наоборот - совсем чайник и относится.
Вы же это все в браузере делаете, и волшебную смесь html с php не отправляете на сервер?

Попробуйте может jQuery.load() применить.
$('#content').load('pages/utilities.php')

И еще одно: innerHTML - это не всегода текст. Зачастую в этом свойстве именно HTML код бывает. Для текста есть отдельные штуки, типа textContent.

Comments

[Николай Чуприк]

Всё правильно. Только человеку лучше подробнее разъяснить, что не так.

Когда сформировали на сервере страницу и передали её в браузер никакие <?php ... ?> исполняться не будут, ни браузер, ни js-движок не знает, что это такое. Это для них просто строка букв.

Если вы хотите подгружать с сервера что-то дополнительно, то для этого надо совершить дополнительные усилия. JS должен специально обратиться к серверу. Для этого в jquery есть разные методы ajax, get, post, load. Разберитесь, как они работают.

Кроме того, надо понимать, что это методы асинхронные. Это значит, что они не выполняются моментально. Они отсылают запрос на сервер, а тем временем js выполняется дальше своим чередом. Т.е. в строчке джаваскрипта, следующей после, например предложенной Stalker_RED, $('#content').load('pages/utilities.php'), у вас не будет сразу же в наличие готового элемента #content с вновь загруженным содержимым. Он появится сам, но когда-то позднее, через "полсекунды", но позднее, когда вернётся ответ сервера.

[Владимир]

Коллеги, искренне благодарю вас за исчерпывающие комментарии, но они не дают ответа на мой вопрос.
Вопрос не в том, где и как выполняются JS и PHP коды. Вопрос в том, почему строка, которую я передаю в браузер оказывается комментарием? Проблему, как она выполняется или будет ли она вообще выполняться я сейчас не рассматриваю.
Еще раз: я передаю на страницу просто строку

var include = "<div class='content'><?php include ( './pages/"+pages_link+".php'); ?></div>";

функцией inContent.innerHTML = include;, где

var inContent = document.getElementById("content");

Строка формируется правильно, console.log(inContent); дает результат

<div class='content'><?php include ( './pages/utilities.php'); ?></div>

Но в браузер строка передается в виде

<div class='content'><!--?php include ( './pages/utilities.php'); ?--></div>

. Причем, преобразование строки происходит еще в JavaScript'е: если проверить ее через console.log(inContent); то в консоли результат уже с комментариями.
Надеюсь, я теперь правильно сформулировал вопрос?

[Stalker_RED]

Владимир,

Вопрос в том, почему строка, которую я передаю в браузер оказывается комментарием?

Потому что innerHTML рассчитан на HTML, а вы подсовываете туда НЕ HTML, а у него такие случаи предусмотрены, причем еще из расчета на XML, похоже.
jsfiddle.net/a7Ldnzpb

К сожалению, сходу не нашел это в спеках. Скорее всего подробно описано здесь: https://www.w3.org/TR/DOM-Parsing/ и это поведение DOM парсера или сериализатора. Но мне искать лень.

Просто не делайте такую фигню.

[Stalker_RED]

Владимир, а точнее здесь:
https://www.w3.org/TR/html5/single-page.html#seria...