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.

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:


Posted

in

,

by

Tags:

Comments

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

  1. asamkamalesan Avatar

    That’s a good time saver tech…

    1. Vijay SRJ Avatar
      Vijay SRJ

      Thank you Sam

Leave a Reply

Discover more from The Full Stack Developer

Subscribe now to keep reading and get access to the full archive.

Continue reading