javascript dom manipulation
var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>Hello World!</p>';
document.body.appendChild(newDiv);javascript dom manipulation
var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>Hello World!</p>';
document.body.appendChild(newDiv);dom manipulation js
// Add new item to end of list
var list = document.getElementsByTagName('ul')[0];
var newItemLast = document.createElement('li');
var newTextLast = document.createTextNode('Item 2');
newItemLast.appendChild(newTextLast);
list.appendChild(newItemLast);HTML DOM
// This is a DOM interface with JAVASCRIPT by using JSON data
// Creating Table with DOM objects
var myData = [{user: "James", address: "123 Keele St. Toronto, ON.", email:"[email protected]"},
{user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"[email protected]"},
{user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"[email protected]"},
{user: "Catherine", address: "1121 New St. Burlington, ON.", email:"[email protected]"}];
window.onload = function() {
document.querySelector("#button1").onclick = generateTable;
}
function generateTable(){
// get the reference for the body
var tbl = document.querySelector("#outputTable");
// revove existing Body element
var tblExistingBody = tbl.querySelector("tbody");
if (tblExistingBody) tbl.removeChild(tblExistingBody);
// creates a <tbody> element
var tblBody = document.createElement("tbody");
// creating all table rows
for (var i = 0; i < myData.length; i++) {
// creates a table row
var row = document.createElement("tr");
// Create a <td> element and put them at the end of the table row
row.appendChild(getTdElement(myData[i].user));
row.appendChild(getTdElement(myData[i].address));
row.appendChild(getTdLinkElement(myData[i].email, myData[i].email));
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
}
// Create a <td> element and a text
function getTdElement(text) {
var cell = document.createElement("td");
var cellText = document.createTextNode(text);
cell.appendChild(cellText);
return cell;
}
// Create a <td> element with a hyperlink
function getTdLinkElement(text, href) {
var anchor = document.createElement("a");
anchor.setAttribute("href", "mailto:"+href);
var anchorText = document.createTextNode(text);
anchor.appendChild(anchorText);
var cell = document.createElement("td");
cell.appendChild(anchor);
return cell;
}Html dom
<!-- USING EVENT HANDLER FOR DOM HTML -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WEB222</title>
<style>
body { margin: 0 18%; }
</style>
<script>
window.onload = function() { // why use window.onload?
var elem = document.querySelector("#myBtn");
elem.addEventListener( "click", displayDate );
}
function displayDate() {
document.querySelector("#demo").innerHTML = (new Date()).toLocaleString();
}
</script>
</head>
<body>
<h1>WEB222 - HTML DOM Event</h1>
<p>Click "Show Current Time" to execute the displayDate() function.</p>
<p id="demo"></p>
<button id="myBtn">Show Current Time</button>
<br>
<!-- for downloading source files -->
<p><a href="" Download>Download</a></p>
</body>
</html>dom manipulation js
// Add new item to start of list
var newItemFirst = document.createElement('li');
var newTextFirst = document.createTextNode('New List Item');
newItemFirst.appendChild(newTextFirst);
list.insertBefore(newItemFirst, list.firstChild);Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
