Generating HTML On the Fly : HTML Generate « HTML « JavaScript DHTML

Generating HTML On the Fly

<title>Dynamically Generated HTML</title>
<script language="JavaScript">
function initializeDiv() {
 div = document.getElementById("testdiv")
function insertElement() {
 var tagIX = document.forms["genform"].elements["elementType"].selectedIndex;
 var tagName = "p";
 if(tagIX == 1) 
    tagName = "h1";
 else if(tagIX == 2) 
    tagName = "blockquote";
 else if(tagIX == 3) 
    tagName = "pre";
 var text = document.forms["genform"].elements["ta"].value;
 var newElement = document.createElement(tagName);
 var newText = document.createTextNode(text);

function deleteElement() {
 if(div.hasChildNodes()) {
      var children = div.childNodes;
      var n = children.length - 1;
      var lastChild = children.item(n);
<body onload="initializeDiv()">
<h1 align="center">Dynamically Generated HTML</h1>
<hr align="center">
<div id="testdiv">
<hr align="center">
<form name="genform">
<b>Tag: </b>
<select name="elementType" size="1">
<option selected="true">P
<input type="button" value="Insert element" onclick="insertElement()">
<input type="button" value="Delete element" onclick="deleteElement()"></p>
<textarea name="ta" rows="5" cols="40">
Sample text


Related examples in the same category

1.Using JavaScript to Create HTML Tags