Updated April 3, 2023
Introduction to JavaScript getElementById()
The getElementById() method of the JavaScript programming language returns the element which is having an ID attribute with a specific value. This JavaScript getElementById() is one of the most useful and common method in HTML DOM(Document Object Model is a programming API). It is mainly used to manipulate or to get some info from an element on to your document. This method will return the NULL value if none of the elements is available with the specific ID. This specific ID which is mentioned should be unique within the page. If more elements are specified with specific ID then getElementById() will return the first element’s source code.
Syntax:
document.getElementById(elementID1)Explanation of the Parameters of getElementById():
ElementID1: This elementID1 parameter of the document.getElementById() function is a mandatory field and required. The ID’s attributes value of the element which you want to get. This parameter accepts only string types.
How JavaScript getElementById() work?
The getElementById() method of the JavaScript works based on the parameter which is passed inside of it. This getElementById() method works by returning the element which is having an ID attribute with the specific/specified value. JavaScript’s method works with the help of the HTML DOM. It is useful in working on manipulating or getting info from the element on to your document. It works in Google Chrome, Internet Explorer, Mozilla Firefox, Safari and Opera browsers. It works by returning the element object which represents an element with help of the specific ID but it will return NULL only if no element values exist which are with the specific/specified ID.
Examples to Implement JavaScript getElementById()
Below are the examples are mentioned:
Example #1
This is the example of creating a button. It is to show the other text with the help of the getElementById() function. Here at the first inside of the HTML tags and BODY tags, paragraph tags are created to an ID attribute called “demo1” with the string value “Click on the button below to change the text here.”. Then <button> tag is created by specifying a function “myFunciton1” to execute after a click on the button. When the button is pressed then the function will run. Inside of the function, our required function getElementById() will work. Here “Hello RaghuRamKondeti, This is Pavan Kumar Sake” is mentioned to the document.getElementById().innerHTML function to replace the original text. Then the JavaScript and HTML tags are closed just to make sure the correct syntax is placed. Output 1_1 is to show the output which is just after executing the code. Then after clicking the button output, 1_2 will be shown.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo1">Click on the button below in order to change the text here.</p>
<button onclick="myFunction1()">Try it :: </button>
<script>
function myFunction1() {
document.getElementById("demo1").innerHTML = "Hello RaghuRamKondeti, This is Pavan Kumar Sake";
}
</script>
</body>
</html>Output:
Example #2
This is the example of changing the color of the ID’s attribute text. Here at first HTML tags, BODY tags are created then Paragraph tags like <p> are created. Inside of the paragraph tags, an id “demo1” is created with some string value for the specific ID. Then Button tag is created. Inside of the button tag, a function “myFunction1()” is created to execute the function after clicking the button which is shown at the time of executing the code. Then <script> tag is created to place JavaScript code. Then a function is created and then specified a variable “x1”. Inside of the x1 variable, getElementById() is created in order to access the ID’s attributes value. Then “x1” variable content is used with its specific color changing function “x1.style.color”. Here for this, red color is associated to change the color. Check out the outputs below.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo1">Click on the button below which is helpful to change the color of the text here itself. Color will be changed to red Colour</p>
<button onclick="myFunction1()">Try it buddy :: </button>
<script>
function myFunction1() {
var x1 = document.getElementById("demo1");
x1.style.color = "red";
}
</script>
</body>
</html>Output:
Example #3
This is the example to get the text which is inside of the paragraph tag by accessing the content using the getElementById() method of the JavaScript Language. Here at first inside of the paragraph tag “<p>” of the <html> & <body> tag, an id called “element1” is created with the text “GetElementById1” inside of the paragraph tags. Then “<script>” tag is created to start the JavaScript coding to implement “getElementById()” method. Then a variable “s1” is created to access the “element1” id of the paragraph tag to get the specific ID’s attribute value. Then document.write(s1) is created to print the variable value “GetElementById1”. Then the closing of the html tags is done.
Code:
<html>
<body>
<p id="element1">GetElementById1</p>
<hr>
<p>The below text is created with the help of JavaScript getElementById() method :: </p>
<script>
var s1 = document.getElementById("element1").innerHTML;
document.write(s1);
</script>
<hr>
</body>
</html>Output:
Example #4
This is an example to replace the original text’s part “GetElementById1” with the specific/specified text “PROFITLOOPS” by assigning the text value to the getElementById() function and then by assigning the value to the variable s. Here at first ID attribute is created inside of the paragraph tags. Here ID attribute is “Element1” with the text value “GetElementById1”. Then variables are created to assign the getElementById() value but here some string text called “PROFITLOOPS” is created and assigned to replace the original text. Then with the help of document.write() function, the output of the s variable will be printed. Then only closing the tags is done. Here <hr> tags are used only to differentiate the text with horizontal line gaps.
Code:
<html>
<body>
<p id="element1">GetElementById1</p>
<hr>
<p>Here original text "GetElementById1" is replaced with the string text :: PROFITLOOPS :: </p>
<hr>
<script>
var s = document.getElementById("element1").innerHTML = "PROFITLOOPS";
document.write(s);
</script>
<hr>
</body>
</html>Output:
Conclusion
I hope you learnt what is the definition of JavaScript getElementById() method along with its syntax and the explanation of ElementID1 Parameter, Working of the JavaScript getElementById() method along with various examples in order to understand the concept of the document.getElementById() function better and so easily.
Recommended Articles
This is a guide to JavaScript getElementById(). Here we discuss syntax, how does JavaScript getElementById() works, examples to implement with proper codes and outputs. You can also go through our other related articles to learn more –
