Руководство по вставке содержимого в элементы jQuery

jQuery предоставляет несколько методов, таких как append(), prepend(), html(), text(), before(), after(), wrap() и т. д., которые позволяют нам вставлять новое содержимое в существующий элемент.

jQuery-методы html() и text() уже рассматривались в предыдущей главе, поэтому в этой главе мы поговорим об остальных из них.

jQuery-метод append()

jQuery-метод append() используется для вставки содержимого в конец выбранных элементов.

Следующий пример добавит некоторый HTML-код ко всем абзацам готового документа, а при клике на кнопку другой HTML-код.

<script>
$(document).ready(function(){
    // Добавляем ко всем абзацам
    $("p").append(' <a href="#">read more...</a>');
    
    // Добавляем элемент к id контейнеру
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>

jQuery-метод prepend()

jQuery-метод prepend() используется для вставки содержимого в начало выбранных элементов.

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

<script>
$(document).ready(function(){
    // Добавляем ко всем абзацам
    $("p").prepend("<strong>Note:</strong> ");
    
    // Добавляем элемент к id контейнеру
    $("button").click(function(){
       $("#container").prepend("This is demo text.");
    });
});
</script>

Вставляем несколько элементов с помощью методов append() и prepend()

JQuery-методы append() и prepend()также поддерживает передачу нескольких аргументов в качестве входных данных.

Код jQuery в следующем примере вставит элемент <h1>, <p> и <img> внутрь элемента <body>.

<script>
$(document).ready(function(){
    var newHeading = "<h1>Important Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("body").append(newHeading, newParagraph, newImage);
});
</script>

jQuery-метод before()

jQuery-метод before() используется для вставки содержимого перед выбранными элементами.

В следующем примере будет вставлен абзац перед элементом контейнера в готовом документе, тогда как при нажатии кнопки будет вставлено изображение перед элементом <h1>.

<script>
$(document).ready(function(){
    // Добавляем содержимое перед элементом с id container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Добавляем контент перед заголовком
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

Содержимое или элементы, вставленные с использованием jQuery-методов before() и after(), добавляются за пределы выбранных элементов.

jQuery-метод after()

jQuery-метод after() используется для вставки содержимого после выбранных элементов.

В следующем примере будет вставлен абзац после элемента контейнера в готовом документе, а вставка изображения после элемента <h1> при нажатии кнопки.

<script>
$(document).ready(function(){
    // Добавляем содержимое после элемента с id container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Добавляем контент после заголовка
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

Вставляем несколько элементов с помощью методов before() и after()

JQuery-методы before() и after() также поддерживает передачу нескольких аргументов в качестве входных данных. В следующем примере будут вставлены элементы <h1>, <p> и <img> перед элементами <p>.

<script>
$(document).ready(function(){
    var newHeading = "<h2>Important Note:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
});
</script>

jQuery-метод wrap()

jQuery-метод wrap() используется для оборачивания HTML-тегов вокруг выбранных элементов.

Код jQuery в следующем примере обернет элементы контейнера <div> с классом .wrapper в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом <b>, а затем — элементом <em>.

<script>
$(document).ready(function(){
    // Оборачиваем элементом div с классом wrapper элемент container
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Оборачиваем содержимое абзаца тегами b и em
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>