JavaScript/Adding elements
Jump to navigation
Jump to search
Basic Usage
Using the Document Object Module we can create basic HTML elements. Let's create a div.
var myDiv = document.createElement("div");
What if we want the div to have an ID, or a class?
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.class = "main";
And we want it added into the page? Let's use the DOM again…
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.class = "main";
document.documentElement.appendChild(myDiv);
Further Use
So let's have a simple HTML page…
<html>
<head>
</head>
<body bgcolor="white" text="blue">
<h1> A simple Javascript created button </h1>
<div id="button"></div>
</body>
</html>
Where the div which has the id of button, let's add a button.
var myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "my button";
placeHolder = document.getElementById("button");
placeHolder.appendChild(myButton);
All together the HTML code looks like:
<html>
<head>
</head>
<body bgcolor="white" text="blue">
<h1> A simple Javascript created button </h1>
<div id="button"></div>
</body>
<script>
myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "my button";
placeHolder = document.getElementById("button");
placeHolder.appendChild(myButton);
</script>
</html>
The page will now have a button on it which has been created via JavaScript.