How to insert Input Elements dynamically in your blogspot posts

By using the following steps you can insert input elements in your blogspot post dynamically.

Step 1: Start Writting New Post by clicking on the "Create New Post" button

Step 2: Goto HTML view of your post.

Step 3: Add a div where the Input elements are to be added, and give Id to the div. As in my example I have given the Id of the div as "demoDiv". Add another div which will be used to raise click event to add the button. In this demo I have added the div as "insertElementDemo" 

Step 4:

Save and close the Post & Open blog admin portal  of you blog, and navigate to Templete.

Now click on the Edit HTML button as shown in above image.

Step 5: 

Now it will show you a message as shown below.

Here, click on Proceed button, which is highlighted. It will show you the Html editor of your blog which looks like as shown below.

Step 6:

Here in this HTML editor find Head Tag (Actually we have to write javascript in head tag).

Once you find the head tag, in that write the following line.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

this will append JQuery in your blog.

Step 7:

Now you will have to write JQuery and an Event on which you want to add the element in you blog post.

To add an element following javascript code will be added in the Script Tag, in the HTML editor

The below code is to add a button

 $(document).ready(function(){
//Waiting for the click on insertElementDemo
 $("#insertElementDemo").click(function(){ 
var btn = document.createElement("BUTTON");  //This will create button
var node1=document.createTextNode("This is new."); //create text element
btn.appendChild(node1); //text element will be added to button
//finding the div where the input element will be added
var element=document.getElementById("demoDiv"); 
element.appendChild(btn); //Adding button to div

Step 8: Click on Save template button highlighted in above image.

Demo

Click Here for Insert Button