. Advertisement .
..3..
. Advertisement .
..4..
Your web applications may require you to generate a button on the fly. It shouldn’t be a problem if you follow this guide and learn how to create an HTML button in JavaScript.
How To Create An HTML Button In JavaScript
Using Document.createElement()
The easiest way to create a button in JavaScript is to use the Document.createElement() method. In most its basic form, the syntax is:
document.createElement(tagName)
The JavaScript code above will create a tagName element in HTML. To be more specific, our case needs tagName to be “button”.
This parameter is mandatory and should be given as a string. Here is an example of using the Document.createElement() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function createButton() {
var div2 = document.getElementById("button2");
var button = document.createElement('Button');
var text = document.createTextNode("The new button!");
button.appendChild(text);
div2.appendChild(button); ;
}
</script>
</head>
<body>
<button onclick = "createButton()">
Press this to create a new button!
</button>
<br><br>
<div id = "button2"></div>
</body>
</html>
The page has the first button after loading. When clicked, it generates another button below it.
The HTML file above listens to the onclick event of the first button and triggers the createButton() function, which has been defined in the <script></script> part in the HTML head.
This function accesses the <div> element that is going to host the second button using the getElementById() method.
It then creates a button element and appends this button to the HTML file with the appendChild() method. The appendChild() inserts a node object after the last element of an element, which is div2.
What if you want to replace the old button with a new one? This HTML page should get the job done.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function replaceButton() {
var button = document.getElementById("button");
button.textContent = "Hello!";
}
</script>
</head>
<body>
<button id="button" onclick = "replaceButton()">
Press this to create a new button!
</button>
</body>
</html>
When pressed, the original button will trigger the replaceButton() function, which changes the textContent attribute of the button.
Using Node.insertBefore()
You can also use insertBefore() to create a button.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function createButton() {
var button = document.createElement("button");
button.innerHTML = "This is a new button";
var element = document.getElementById("div");
var child = document.getElementById("heading");
element.insertBefore(button, child);
}
</script>
</head>
<body>
<div id = "div">
<h3 id = "heading">Example of Using insetBefore()</h3>
</div>
<button onclick = "createButton()"> Create Button </button>
</body>
</html>
The insertBefore() method inserts the button element before the h3, which is a child of the div element.
Conclusion
In addition to using JavaScript to show text, you can also create an HTML button in JavaScript with the document.createElement() method. It works perfectly with other DOM manipulation functions to dynamically change the look of your HTML page.
Leave a comment