How to save time typing document.getElementById().value and document.createElement() in javascript?

If you are using vanilla javascript , you may frequently use document.getElementById(elementid).value to retrieve the value of a html element.

Also to dynamically create a html element you would use document.createElement(elementtype)

You can avoid typing these manually by following a simple trick.

The trick is to create a function which executes the above code and assign the function to a variable.

    var $ = function( id ) { return document.getElementById( id ).value; };

Now you can get the value of any html element in the current page using the code :

   var value =     $(id);

Here is an example:

<html>


	<head>
	
	
	<script>
	
		    var $ = function( id ) { return document.getElementById( id ).value; };
			
			
			function alertme(id){
			
				alert($(id));
			}
	</script>
	
	</head>
	<body>
	
		<input id="userinput"/>
		<button  onclick ="alertme('userinput')">Click Me</button>
	</body>


</html>

In the above code I am alerting whatever text is entered by the user in an input text box on click of a button.

Instead of using document.getElementById(id).value in the alert statement I am just using $(id).

This saves time typing document.getElementById(id).value everytime you need to get the value of a html element.

Advertisements

Similarly to create a html element dynamically through javascript you can use the below code:

    var create = function(element){ return document.createElement(element);};

Now to create a new element you just need to do

var newbutton = create("button");

The above code creates a new button. You can then append this button to any part of the html by using appendChild() method.

Here is an example where new elements are created when user enters the element type in a text box and then clicks on a button :

<html>


	<head>
	
	
	<script>
	
		    var $ = function( id ) { return document.getElementById( id ); };
			
			    var create = function(element){ return document.createElement(element);};
			
			
			function addElement(element){
			
				
				
				var newElement = create(element);
				newElement.innerHTML = "New";
				
				$("main").appendChild(newElement);
				
				
				
			}
	</script>
	
	</head>
	<body id="main">
	
		<input id="userinput"/>
		
		<button  onclick ="addElement($('userinput').value)">Create</button>
	</body>


</html>

I am also using the shorthand $ for getting an element by its id , by creating a shortcut function in the above code.

Here are sample outputs:

2 thoughts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s