Как выводить html с помощью JavaScript

С помощью JavaScript удобно делать “мини” движки для сайтов сделанных на html. Например, можно выводить через яваскрипт левый сайдбар, шапку и футер сайта, поскольку эти элементы часто изменяются. Ниже я расскажу о том, как это делается. Помимо этого способа, есть ещё один отличный способ вывода контента на сайте: вывод html с помощью ajax.

Для вывода html с помощью JavaScript нужно сделать:

1. Создать файл с расширением .js. Например, topjava.js.

2. Напишите в этом файле следующее:

document.write('Сюда можно писать html код');
document.write('<br/>');
document.write('Как не писать каждый раз документ райт?');
document.write('<br/>');
document.write('Очень просто');
document.write('Это первая строка'+
'Это втора строка'+
'Видите? Можно писать и так');
document.write('<br/>');
document.write('Стоит так же сказать, что вместо одинарной'+
' ковычки можно использовать "');
document.write('<br/>');
document.write("Например так");
document.write('Если Вам надо написать одинарную ковычку, то'+
' напишите её через слэш: ' - так '+
'она будет воспринята как текст');

Если Вы будете писать текст без пробелов, то использование переносов ‘+ на следующие строки не обязательны. С текстом можно писать любой html код.

Примечание

Если Вам нужно подключить файл JavaScript, то его можно подключить так:

document.write('<SCRIPT type="text/javascript" language="JavaScript"
src="https://zarabotat-na-sajte.ru/java.js"></SCRIPT>');

3. В месте где Вы хотите вывести текст из javascript напишите следующие:

<SCRIPT type="text/javascript" language="JavaScript"
src="https://zarabotat-na-sajte.ru/topjava.js"></SCRIPT>

Если ничего не выводится, то это означает, что у Вас ошибка в файле topjava.js. Скорее всего, где-то пропущена кавычка.

Таким образом, Вы можете написать несколько яваскриптов и выводить различные элементы сайта. Это очень удобно, когда сайт написан на html и на нем много страниц. Вы изменяете код всего лишь в одном файлике, а получается, что он изменяется на всем сайте.




Читайте также:

• Как вывести теги html на странице сайта

• Коды и названия html цветов для сайта

• HTML тег <a> – подробное описание с примерами

• HTML тег <table> – подробное описание с примерами

• HTML тег <img> – подробное описание с примерами

• HTML тег <form> – подробное описание с примерами

• HTML тег <div> – подробное описание с примерами

• Как создать сайт с нуля — пошаговая инструкция

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.