there are several way to add add an element to an html page without loading a new page the best way is to use the jquery library. below is a sample code of a simple way to add a new content to an html page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<ol>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ol>
<button id="btn2">Append list items</button>
</body>
</html>
how it works:
1.first you can either use an online library for your jquery as i did or you can download an offline version of the library.
note: a jquery function will not have effect except you have the library.
2. write you jquery code or function: the inbuilt jquery function for this is called append
$("p").append("Some appended text."); append add text or element at the end of a page or a tag
note jquery also has a function for adding text or element to the beginning of your post
this is called prepend $("p").prepend("Some prepended text.");
$(document).ready(function(){
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
above is the jquery of the page first we create a button with a unique id in this case btn2 this calls the function append of the element ol.
3. create your list items.
click here for what you should have if you are correct
Popular Posts
-
a loader is a graphically representation of current progress i.e when a page is currently loading or when your computer is working on someth...
-
Here is a simple code for digital clock using html css and javascript. The CSS and HTML and JAVASCRIPT <html> <head> ...
-
have you ever wondered how a simple html to-do list works guess what java-script just made life simpler for programmer below is your code ...
-
there are several way to add add an element to an html page without loading a new page the best way is to use the jquery library. below is a...
-
To create this animation you need a small amount of experience using css and javascript because the major work is done by this two but no...
-
have you ever wondered how a slide show in webpage is created relax and stay back am going to take you through the easiest way to create an ...
-
CREATE THE CSS FOR THE FILE( cal.css ) .container ul { width:50%; height: auto; float: left; margin-left: 22%; margin-top: 5%...
-
The Java 3D API is an application programming interface used for writing three-dimensional graphics applications and applets. It gives deve...
-
with corel draw there is no limit to what you can create the secret is the better you are at thinking the best you will become below is wh...
-
Create a cool and very interactive website for as low as anything choose from variety of template 1. EDUCATIONAL( create a website for...
Add Element To An Html Page Without Reloading The Page(Using Jquery) ~ Itgist >>>>> Download Now
ReplyDelete>>>>> Download Full
Add Element To An Html Page Without Reloading The Page(Using Jquery) ~ Itgist >>>>> Download LINK
>>>>> Download Now
Add Element To An Html Page Without Reloading The Page(Using Jquery) ~ Itgist >>>>> Download Full
>>>>> Download LINK