Random Snippets » getElementById

How to dynamically add content to a div and store the content to a cookie via JavaScript

Knix — Tue, 15 Apr 2008 06:45:17 +0000

This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.

Demo

Your content will be added dynamically below:

Here is the plain HTML for the demo:


Content to be added:
Type here...<h1>tags work as well</h1><u>woohoo</u>





Your content will be added dynamically below:

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.

Demo

Your name will be saved below:

Here is the HTML code:


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.









Your name will be saved below:

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:

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.

How to dynamically remove/delete elements via JavaScript

Knix — Thu, 27 Mar 2008 05:57:53 +0000

This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.

Demo

I am the parent div.

I am a child div within the parent div.

Here is the plain HTML code:

I am the parent div.

I am a child div within the parent div.

The important thing to note here is that the child div is within the parent div. Once the Remove Element button is clicked, the onClick event listener is triggered and launches the removeElement JavaScript function. This functions accepts two arguments:

parent – This is just the div id of the parent div.
child – This is the div id of the child div.

Here is the code for the removeElement JavaScript function:

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

The if block in lines 2-6 attempts to obtain the child element if it exists. This is just in case the user has already removed the child div and is reattempting to it. In this case, a JavaScript error would normally pop up because the child div does not exist.

If the child element does exist, the first thing that we do is obtain the child element in line 3 using the child div id. Next, we do the same thing with the parent element by using the parent div id Lastly, we invoke the removeChild method from the parent element and pass the child element as the argument. That’s it!

If the child div has already been removed, the else block in lines 7-10 gets executed. In this case, an alert would tell the user that the child div has already been removed and the function would return a false value.

Here is another demo of this JavaScript function where you can type in the name of the child element to be removed and just click on the Remove Element button OR you can just click the button that corresponds to each given child div to remove it.

Demo

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

We are using the same JavaScript function as above. Here is the plain HTML for the demo:

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

Here is a demo that removes child elements from the parent using checkboxes that a user would select. This demo uses the same removeElement JavaScript function.

Demo

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne

Remove childTwo

Remove childThree

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne Remove childTwo Remove childThree

The concept is the same as the previous demos where we attach the removeElement function to an event handler, which in this case is the onClick event handler of the checkbox. Once the checkbox is checked (or even unchecked), it fires off the onClick event handler and executes the removeElement JavaScript function and passes off the name of the parent div and the value of the checkbox.