How to dynamically add content to a div and store the content to a cookie via JavaScript
April 14th, 2008 | Published in javascript | 9 Comments
This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.
Here is the plain HTML for the demo:
1 2 3 4 5 6 7 8 | <form name="myForm">
Content to be added:
<textarea name="myContent">Type here...<h1>tags work as well</h1><u>woohoo</u></textarea>
<input type="button" value="Add content" onClick="addContent('myDiv', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<br><br>
Your content will be added dynamically below:
<div id="myDiv"></div> |
There are 3 important parts to the HTML code:
- textarea – This is the content that the user enters. HTML tags are naturally supported.
- Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.
- myDiv – This is the id of blank div where the content will be inserted.
Here is the JavaScript code for the addContent() function:
1 2 3 | function addContent(divName, content) { document.getElementById(divName).innerHTML = content; } |
That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.
This demo is in response to a request that saves the content that the user has entered.
Here is the HTML code:
1 2 3 4 5 6 7 8 9 | <form name="myForm2">
Enter your name below and click the button. Your name will be saved to a cookie that expires in 7 days. When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.
<br><br>
<input text name="myContent2" value="Enter your name here...">
<input type="button" value="Save my name" onClick="addContent('myDiv2', document.myForm2.myContent2.value); setCookie('content', document.myForm2.myContent2.value, 7);">
</form>
<br><br>
Your name will be saved below:
<div id="myDiv2" style="font-weight: bold;"></div> |
The onClick event listener will launch 2 scripts this time:
- addContent – This will do exactly what it did before in the first demo and just insert the input text value inside the div.
- setCookie – This will save a cookie with the name content and assign whatever is inside the input text as the value. In addition, the cookie is set to expire in 7 days.
To avoid reinventing the wheel, I have borrowed the JavaScript get and set cookie functions from W3 Schools and edited it slightly for the needs of this demo.
Here are the new JavaScript functions for cookie management:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end)); document.getElementById('myDiv2').innerHTML = cookieContent; } } } getCookie('content'); |
Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.
When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.
Although using cookies is a great way to store information, there are a couple of caveats:
- Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.
- Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.
Customize message
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
July 14th, 2008 at 12:54 am (#)
Great Work. I was trying our such a script. Thanks
[Reply]
July 14th, 2008 at 1:08 am (#)
Is there a way to save this content so that next time when a user opens the page, it should be the new content.
[Reply]
Knix reply on July 14th, 2008 7:35 am:
Hi suresh babu,
You sure can save the content. There are several ways to do this and I will try to think of the simplest way and post an answer by this evening.
[Reply]
Knix reply on August 2nd, 2008 10:08 am:
Hi suresh babu,
I finally got around to doing this demo. I hope this information helps.
[Reply]
Suresh Babu reply on August 2nd, 2008 7:03 pm:
Thank you Knix. This is what I was looking for.
[Reply]
December 11th, 2008 at 1:32 pm (#)
Nifty! Worked the first time!
QUESTION, though.
While making specific use of it I stumbled into a problem that I hope someone can help on. This may not be the best/only way to skin this cat, but we have a PHP/MySQL page that has to be modified to ADD rows for data entry when needed. I have abandoned the traditional DOM object methods of adding a single row, since in this case the addition would be a whole block of rows. I don’t think I’m smart enough to do that…
Anyway, an idea hit me to make use of our MySQL dB and store the rows in there, and retrieve them using your method.
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
Content to be added:
Your content will be added dynamically below:
Skipping an ultimate requirement that the content of the addition needs to be invisible and inaccessible, I tried the above out. It works, but the variable ($_value) has form elements in it, including . The close of the tag, interrupts the value and throws the remaining code to the page, not awaiting insertion by the Submit Button.
Example: http://www.facey.com/insert_content1.php
The Submit button successfully produces the part that stayed inside, but you see my problem.
IS THERE A WAY to use this javascript addContent function, incorporate the utility of an ADD button, and avoid using the packaging of FORMS?
Thanks for any help!
p.s. The PHP component is transparent. Direct inclusion of the HTML contained in the variable as the value of TEXTAREA produces the same result.
[Reply]
March 16th, 2009 at 12:32 pm (#)
Hey,
Is there a way to save the contents of a (all of the inside) with cookies and then when the page loads, open the cookie and display the saved data as the ’s inside the tag?
Also, the user updates the cookie with a link?
Please help.. i would greatly appreciate it :)
[Reply]
December 23rd, 2009 at 12:58 am (#)
Fantastic guide!
[Reply]
February 23rd, 2010 at 8:32 am (#)
Did anyone ever find out how to use the cookie to retrieve the users last hidden/shown divs ?
I’ve seen tutorials for names etc, but nothing yet on how to keep toggled settings.
I’m looking for toggle2 settings to be kept.
Thanks for any pointers!
[Reply]