Interactive and dynamic web applications and websites not only require the web developer to be able to create DOM elements but also require the developer to be able to add dynamic content. This is easily achievable with another set of jQuery functions.
Create a blank HTML document named recipe-4.html, and ensure that you have the latest version of jQuery available to be included within this HTML document.
Learn how to dynamically add content into the DOM by performing each of the following steps:
Add the following code to your newly created HTML document, which will create a simple HTML web page:
<!DOCTYPE html> <html> <head> <title>Insert content into an element</title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <div id="container"> <p>Here is some current HTML content</p> </div> <textarea id="myTextarea"></textarea> </body> </html>Insert the following JavaScript code within the script tags in the document head. This code will inject different HTML content and elements into the DOM at various points.
$(function(){ //Remove the container elements current HTML $('#container').html("<p>I have replaced the all the HTML within the #container element</p>"); //Add some more HTML to the beginning of the container element $('#container').prepend("<p>Another paragraph that has been prepended.</p>"); //Add a button to the end of the container element after all other HTML content $('#container').append("<button>A Button Appended</button>"); //Add some text into the text area element $('#myTextarea').val("Added some text using .text()"); });
The quickest way to add content to an element is to use the
html() function. By providing this function with a string as an argument, it will replace the selected element's current DOM contents with the provided string. If no string is provided, this function will return the element's DOM contents formatted as an HTML string.
Besides replacing the content of an element, we can also use append() and prepend() to add additional content at the end and at the beginning of the current content, respectively. Additionally, we have other functions available such as text(), which will decode any HTML before it inserts the string within the element. The
text() function is typically used for text areas for this reason.
Based on the HTML provided in the previous section, we can alter the content of the #container element using the jQuery functions previously discussed as follows:
$(function(){
$('#container').html("<p>I have replaced the all the HTML within the #container element</p>");
$('#container').prepend("<p>Another paragraph that has been prepended.</p>");
$('#container').append("<button>A Button Appended</button>");
$('#myTextarea').val("Added some text using .text()");
});After each of these functions has been executed, the HTML file rendered by the browser will be transformed, which is illustrated as follows:
<!DOCTYPE html> <html> <head> <title>Insert content into an element</title> </head> <body> <div id="container"> <p>Another paragraph that has been prepended.</p><p>I have replaced the all the HTML within the #container element</p> <button>A Button Appended</button> </div> <textarea id="myTextarea">Added some text using .text()</textarea> </body> </html>