Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/adding-dom.html

Created May 16, 2017 18:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoelCodes/242fb4df2e7a8f588b5f79ee4c645cde to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoelCodes/242fb4df2e7a8f588b5f79ee4c645cde to your computer and use it in GitHub Desktop.
Download ZIP
Raw
adding-dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p class='loading'>Loading...</p>
<ul id='student-list'></ul>
<script>
setTimeout(() => {
const p = document.getElementsByTagName('p')[0];
p.remove();
const names = ['Bill','Alex', 'Alysia', 'Heather'];
const studentList = document.getElementById('student-list');
names.forEach(name => {
const studentListItem = document.createElement("li");
studentListItem.innerText = name;
studentList.appendChild(studentListItem);
});
}, 1000);
</script>
</body>
</html>
Raw
events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>My bucket list</p>
<ul>
<li>Bucket of chicken</li>
<li>Bucket of beer</li>
<li>Bucket of heart medicine</li>
</ul>
<form>
<p><input type="text" name="content"></p>
<p><input type="submit" value="Add Bucket"></p>
</form>
<script>
const lis = document.querySelectorAll('li');
console.log(lis);
lis.forEach(li => {
li.addEventListener('click', (evt) => {
evt.target.remove();
});
});
const form = document.querySelector('form');
const ul = document.querySelector('ul');
form.addEventListener('submit', (evt) => {
evt.preventDefault();
const li = document.createElement('li');
li.addEventListener('click', (evt) => {
evt.target.remove();
});
li.innerText = 'Bucket of ' + form.elements.content.value;
ul.appendChild(li);
form.elements.content.value = '';
debugger;
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.highlight{
background-color: tomato;
}
</style>
</head>
<body>
<h1 class="title large">My Bucket List</h1>
<ul id="bucket-list">
<li>Bucket of chicken</li>
<li>Bucket of beer</li>
<li>Bucket of cholesterol medicine</li>
</ul>
<!--<script src='index.js'>
</script>-->
</body>
</html>
Raw
index.js
alert('Hello!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment