jQuery Add New Elements, Attributes, Contents

It's simple to add new elements/content using jQuery.

You can also search for these topics, add elements to div and list using jquery, select the element to add with jquery, how to add elements inside div with jquery, jquery add element attribute, jquery add element before another, add elements prev and last using jquery, jquery add element property and html.

Add New HTML Content

We will examine four ways used to add additional contents: jQuery

append() - Inserts content at the end of the components that have been chosen.
prepend() - Adds content at the start of the items selected.
after() - After the specified components, material is added.
before() - Inserts contents before the items selected.

You can also search for these topics, add new html content selection using jquery, add new html content dynamically in jquery, how to add new html content function with jquery, add multiple new html content with jquery, how to add newline content in jquery, jquery add new html content button and code, jquery add new html content line, jquery add new html content property and html, jquery add new html content of element.

jQuery append() and prepend() Methods

The jQuery append() function adds content to the END of the specified HTML elements you've chosen.

The jQuery prepend() function of jQuery adds content AT THE BEGINNING of the specified HTML elements you've chosen.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("#p1").append(" Text added to <b>end</b> of the paragraph.");
        });

        $("#b2").click(function () {
            $("#list1").append("<li>Item added to <b>end</b> of the list</li>");
        });

        $("#b3").click(function () {
            $("#p1").prepend(" Text added to <b>start</b> of the paragraph. ");
        });

        $("#b4").click(function () {
            $("#list1").prepend("<li>Item added to <b>start</b> of the list</li>");
        });
    });
</script>
</head>
<body>

<button id="b1">Append text</button>
<button id="b2">Append list items</button><br /><br />

<button id="b3">Prepend text</button>
<button id="b4">Prepend list items</button><br /><br />

<p id="p1">This is a paragraph.</p>

<ol id="list1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

</body>
</html>

Output :-

This is a paragraph.

List item 1
List item 2
List item 3

You can also search for these topics, jquery append() method after and before element, jquery append method example, jquery div append method, append onload and onchange function using jquery, parameters available in jquery append function, jquery prepend method div with class, The prepend method in jquery isn't working, example for jquery prepend() method.

jQuery after() and before() Methods

The after() function is used to inserts information AFTER the chosen HTML elements.

The before() function is used to adds information BEFORE the specified HTML elements.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b9").click(function () {
            $("#img1").before("<p>This is a paragraph.</p>");
        });

        $("#b10").click(function () {
            $("#img1").after("<p><br /><a href='https://www.simmanchith.com'>Visit simmanchith.com</a></p>");
        });
    });
</script>
</head>
<body>

<button id="b9">Add Text BEFORE Image</button><br /><br />
<button id="b10">Add Link AFTER Image</button><br /><br />

<img id="img1" src="../../favicon.png" alt="jQuery">

</body>
</html>

Output :-

You can also search for these topics, jquery after and before methods add html and css, calling the jquery after() and before() methods, multiple conditions used in jquery after() and before() methods, list out the parameters, example for jquery after and before methods.

Add Several New Elements With append(), prepend(), after(), and before()

In the instances above, at the start/end of the specified HTML elements just a few text/HTML were added.

The append(), prepend(), after(), and before() functions, on the other hand, can take an unlimited amount of additional elemnts as arguments.

Text/HTML (like in the previous instances), jQuery, or JavaScript code and DOM components can all be used to produce new elements.

Example :-

We build numerous new components in the following example. Elements are produced via text/HTML, jQuery and DOM. Then with the function append() we add the additional elements to the document body.

var txt1 = "<p>Text.</p>";    // Create text with HTML

var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery

var txt3 = document.createElement("p");
txt3.innerHTML = "Text.";         // Create text with DOM

$("body").append(txt1, txt2, txt3);   // Append new elements

Note:- This also works for other functions like prepend(), after() and before().

You can also search for these topics, definition to add several new elements with append() and prepend() using jquery, example for jquery Add Several New Elements With append() and prepend(), Add Several New Elements With after() and before(), how to add new element after() and before(), add multiple elements after() and before(), example.