ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Добавление содержимого на страницу

Добавление содержимого на страницу

Библиотека jQuery предлагает много функций для манипулирования содержимым страницы: от простой замены HTML-кода до точного расположения нового HTML относительно выбранного элемента и полного удаления элементов и содержимого со страницы.

В созданном нами ранее документе протестируем основные методы по добавлению содержимого на веб-страницы.

Для манипулирования содержимым страницы существует несколько jQuery-функций.

Метод .html()

Метод .html() может считывать существующий HTML-код внутри элемента, а также замещать текущее содержимое другим HTML-кодом.

Для возвращения HTML-кода из выборки просто надо добавить .html() после выборки jQuery. Например, можно запустить следующую команду:

alert($(".foo").html());

$(document).ready(function() {
alert($(".foo").html());
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .html()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert($("p.foo").html());
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Данный код создает окно, в котором выводится тест указанного абзаца. Используя метод html() таким образом, можно сделать копию HTML-кода, содержащегося внутри определенного элемента и вставить его в другой элемент на странице.

Если в качестве аргумента сообщить функции .html() строку, то поменяется текущее содержание выборки:

$("p.foo").html("<h2>Теперь это заголовок</h2>");

Данная строка кода заменит весь HTML-код внутри элемента c дескриптором p имеющим класс .foo.


$(document).ready(function(){
$("p.foo").html("<h2>Теперь это заголовок</h2>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .html()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p.foo").html("<h2>Теперь это заголовок</h2>");
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Если вы используете метод html() или text() для извлечения HTML-кода или текста из выборки jQuery, содержащей множество элементов, то HTML-код или текст будет извлечен только из первого элемента выборки. Например, если вы примените код pContents = $("p").html(); к странице, на которой присутствует 10 элементов p, то в переменной pContents будет храниться HTML-код только из первого элемента p на странице.

Тем не менее, при использовании методов html() или text() для вставки HTML-кода или текста в выборку jQuery, все выбранные элементы окажутся затронуты вставкой. Например, код $("p").html("<h2>Теперь это заголовок</h2>");> заменит HTML-код во всех элементах p на странице одним абзацем и словом "Теперь это заголовок"

Метод .text()

Работа метода .text() похожа на работу метода .html(), но не принимает HTML-элементы. Она полезна, если вам необходимо заменить текст, заключенный в элемент. Hапример, если нам надо заменить текст в абзаце p c классом .foo, , то нам следует применить следующий код:

$("p.foo").text("Это уже не заголовок");

Элемент p останется как есть, изменится только текст, заключенный в него. Библиотека jQuery кодирует любые HTML-элементы, которые передаются методом .text(), поэтому элемент превращается в сочетание символов &lt;p&gt;. Это может пригодиться, если необходимо отобразить элементы и угловые скобки на странице.


$(document).ready(function() {
$("p.foo").text("Это уже не заголовок");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .text()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px; min-height:300px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p.foo").text("Это уже не заголовок");
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Метод .append()

Метод .append() добавляет HTML-код в качестве последнего дочернего элемента выбранного элемента. Допустим, мы выбрали элемент div, но вместо замены его содержимого вы просто хотите добавить фрагмент HTML-кода перед закрывающим тегом </div>. Метод .append() - это способ добавить элемент в конец маркированного списка (ul) или нумерованного списка (ol). Предположим, вы запускаете следующий код на странице с HTML:

$("#form").append("<h3>В данной форме четыре ошибки</h3>");

$(document).ready(function() {
$("#form").append("<h3>В данной форме четыре ошибки</h3>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .append()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px; min-height:300px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#form").append("<h3>В данной форме четыре ошибки</h3>");
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Метод .prepend()

Метод .prepend() схожа с методом .append(), но добавляет HTML-код прямо после открывающего тега выборки. Например, мы применяем следующмй HTML-код, приведенному выше:

$("#formReg").prepend("<h3>В данной форме четыре ошибки</h3>");

$(document).ready(function() {
$("#formReg").prepend("<h3>В данной форме четыре ошибки</h3>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .prepend()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px; height:300px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#formReg").prepend("<h3>В данной форме четыре ошибки</h3>");
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="formReg">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>
<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>
</div>
</body>
</html>

Теперь вновь добавленное содержимое появится сразу после открывающего тега <div>

Методы .before() и .after()

Если вы хотите добавить HTML-код вне выборки или до открывающего тега выбранного элемента, или прямо после завершающего тега элемента - используйте методы .before() или .after(). Например, принято проверять текстовое поле формы, чтобы убедиться, что посетитель не оставил его пустым. Предположим, что HTML-код этого поля до подтверждения выглядит так:

<input name="name" type="text" id = "name" >

Теперь допустим, что когда посетитель отправляет форму, это поле пусто. Можно написать программу, проверяющее поле и добавляющую за ним сообщение об ошибке. Чтобы добавить сообщение после этого поля, мы можем использовать метод .after() таким образом:

$("#name").after("<span class = 'errors'>Имя пользователя обязательно!</span>");

$(document).ready(function() {
$("#userName").after("<span class = "error">Имя пользователя обязательно!</span>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .after()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.errors{
margin-left:5px;
font-size:18px;
font-weight:bold;
color:#F80004
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#userName").after("<span class='errors'>Имя пользователя обязательно!</span>");
});
</script>
</head>

<body>
<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" id = "userName" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>
</body>
</html>

Данная строка кода выводит на веб-страницу сообщение об ошибке, HTML-код будет выглядеть так:


<input name="name" type="text" id = "userName" >
<span class = "errors">Имя пользователя обязательно!</span>

Метод .before() просто помещает новое содержимое перед выбранным элементом. Поэтому строка:

$("#name").before("<span class=errors>Имя пользователя обязательно!</span>");

Сгенерирует следующий код:


<span class = "errors">Имя пользователя обязательно!</span>
<input name="name" type="text" id = "name" >

$(document).ready(function() {
$("#name").before("<span class=errors>Имя пользователя обязательно!</span>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .before()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px; height:300px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.errors{
margin-left:5px;
font-size:18px;
font-weight:bold;
color:#F80004
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#name").before("<span class='errors'>Имя пользователя обязательно!</span>");
});
</script>
</head>

<body>
<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" id = "name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>
</body>
</html>


Замена и удаление выборок

Метод .remove()

Иногда возникает потребность полностью заменить выбранный элемент или переместить его. Допустим вы хотите удалить элемент span с классом foo <span class="foo">А этот контейнер SPAN внутри него.</span>. Мы можем сделать это следующим образом:

$("span.foo").remove();

$(document).ready(function() {
$("span.foo").remove();
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("span.foo").remove();

});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Метод .replaceWith()

А теперь давайте удалим этот же элемент и сообщим об удалении. Для этого применим следующий код:

$("span.foo").replaceWith("<h5>Добавлено в корзину</h5>");

$(document).ready(function() {
$("span.foo").replaceWith("<h5>Добавлено в корзину</h5>");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("span.foo").replaceWith("<h5>Добавлено в корзину</h5>");
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Данный код удаляет элемент span с классом foo и заменяет его элементом h5.