Monday, January 9, 2012

Add HTML elements using Javascript code

Example of adding HTML elements using Javascript code. Once the button clicked, new element of "li" will be added under the "ul" of id "myitems".

Add HTML elements using Javascript code

<!doctype html>
<head>
 <title>Mobile-Web-App: Add HTML elements using Javascript code</title>
 <meta charset="utf-8">

<script>
function myOnLoad(){
 var myButton1 = document.getElementById("Button1");
 myButton1.onclick = Button1Listener;
}

function Button1Listener(){
 var myText1 = document.getElementById("Text1");
 var myInput1 = myText1.value;

 var newItem = document.createElement("li");
 newItem.innerHTML = myInput1;
 var myItems = document.getElementById("myitems");
 myItems.appendChild(newItem);
 
}

window.onload = myOnLoad;

</script> 
 
 
</head>
<body>
<h1>Mobile-Web-App: Javascript</h1>
<p>Add HTML elements using Javascript code</p>

<p>Enter new item</p>
<form>
<input type="text" id="Text1">
<input type="button" id="Button1" value="Add">
</form>
<ul id="myitems">
</ul>

</body>
</html>


Related article:
- jQuery Mobile: Add HTML elements using Javascript code ~ make it mobile look and feel using jQuery Mobile.
- jQuery .appendTo() - add something on HTML at run-time

at

No comments:

Post a Comment