JavaScript: DOM Manipulation
Tushar Goel
Lead Member Of Technical Staff @ Salesforce | Staff Software Engineer, Technical Lead
In this article, I will explain how to do DOM manipulation using pure JavaScript. We have many other libraries available to do this work but I want to show you, how to do it in pure JavaScript.
For this, I am taking a simple example of adding input text inside a dropdown on a button click. Final example will look like this:
Now, let's have an HTML file and JS file. In this HTML file, I have taken 3 components,
- Input text to enter text
- Select component
- Button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Test</title> </head> <body> <div> <form> <div class="form-group"> <label>Enter text to be added:</label> <input id="inputText" type="text" placeholder="enter text..." /> </div> <br /> <div class="form-group"> <label>Dropdown:</label> <select id="dropdown"></select> </div> <br /> <button id="submit" type="submit">add</button> </form> </div> <script src="main.js"></script> </body> </html>
The HTML looks like this:
Now, let's write a javascript code. Let's define a file main.js and add in a script tag (as defined earlier).
Search button so that we can add a 'click' event with it. I am using the getElementById method for this. It will search for a component whose "id" is "submit". "id" is a field unique id defined in the HTML mentioned above.
const addButton = document.getElementById("submit");
addButton.addEventListener('click', handleClick)
'handleClick' is the callback function which will be called whenever button is clicked. In this function, we going to do the following tasks:
- Extract data from the input text field. Similar to the button, I search component by their id's.
const inputText = document.getElementById("inputText");
const select = document.getElementById("dropdown");
2. Create an 'option' field and add entered text to it
const selectFieldOption = document.createElement("option");
selectFieldOption.value = inputText.value;
selectFieldOption.append(inputText.value);
3. Attach this field with the 'select' component
select.appendChild(selectFieldOption);
Now, you have attached your 'option' field with the 'select' component. Now, whenever you add new text and click on the button, a new field will be added to the select component.
The complete code is as below:
// search button by id
const addButton = document.getElementById("submit");
// adding click event with the button
addButton.addEventListener('click', handleClick)
function handleClick(e) {
e.preventDefault();
const inputText = document.getElementById("inputText");
const select = document.getElementById("dropdown");
//to avoid blank value
if (inputText.value) {
const selectFieldOption = document.createElement("option");
selectFieldOption.value = inputText.value;
selectFieldOption.append(inputText.value);
//to clear input
inputText.value = "";
select.appendChild(selectFieldOption);
}
}
That's for this article. Kindly let me know if you have any questions.