I want to know the most effctive way to dynamically update, insert or remove elements from an html page.

The oute of this is that, I can change an input element into a div element and vice versa based on a user action.

eg

<form><input type="text" value="Value to save"/></form>

and based on some event, i will change that to

<form><div>Value to Save</div></form>

Tx

I want to know the most effctive way to dynamically update, insert or remove elements from an html page.

The oute of this is that, I can change an input element into a div element and vice versa based on a user action.

eg

<form><input type="text" value="Value to save"/></form>

and based on some event, i will change that to

<form><div>Value to Save</div></form>

Tx

• javascript
• html
• dom

• Sorry, I cannot use a framemework because I'm working on one myself and don't want to impose that requirement on the users of mine. Also it may lead to conflicts – Farouk Alhassan Commented Jan 18, 2011 at 14:01
• check my answer, it's a solution without using a framework ;) – stecb Commented Jan 18, 2011 at 16:15

4 Answers 4

I think you could do this task this way (pure JS, without using external frameworks):

//retrieve the <form>  
var form = document.getElementsByTagName('form')[0];

//retrieve the <input> inside the form
var input = form.getElementsByTagName('input')[0];

//create a new <div> DOM element
var newElement = document.createElement('div');

//The containing div text is equal to the input value (your case)
newElement.innerHTML = input.value;

//simple empty the form by set innerHTML = ""
form.innerHTML = "";

//append the <div> inside the form
form.appendChild(newElement);

By the way, I sugges you, if you want to manipulate DOM and do stuff like these in an easier way, learn how to do it by using frameworks like jQuery or mootools ;)

This is a general description:

• Creating: You can create elements with document.createElement and then use one the various insertion methods to the insert the element at a certain position (e.g. Node.appendChild). You need to get references to related nodes first.
  Most browser also support the innerHTML attribute for elements. You can set that attribute to an HTML(or text) string and the content of the element will be updated accordingly.

• Updating: It depends on which data you want to update. E.g. an input element has an attribute value. In order to change the value of a text input you need to get a reference to that element first, then you can do element.value = 'new value'. For content, you can use the already mentioned innerHTML attribute.
  Have a look at an HTML element reference to see what attributes they have.

• Deleting: You want Node.removeChild.

I suggest to also have a look at DOM traversal methods and be aware of browser differences.

Using:

• element.removeChild
• element.appendChild

By using these methods, you can retain references to the elements in case you want to swap them back over again. Any event handlers in place will remain attached to the elements, too.

This depends on your definition of most effective.

If you mean the simplest way, then you can use a library like jQuery and do it like this:

$('form').html('<dynamic markup>');

If you mean the most performant way you can do the following:

document.getElementByTagName('form').innerHTML = '<dynamic markup>';