Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/adding-dom.html

Created May 16, 2017 23:34
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save JoelCodes/92b9631cafe3b6b0b21f53120f12ac10 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>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<p class='loading'>Loading...</p>
<ul id='student-list'></ul>
<script>
setTimeout(() => {
$('.loading').remove();
// const p = document.getElementsByTagName('p')[0];
// p.remove();
const names = ['Bill','Alex', 'Alysia', 'Heather'];
const $studentList = $('#student-list');
names.forEach(name => {
$('<li>')
.text(name)
.on('click', (evt) => {
// Putting a DOM element into the jQuery
const $target = $(evt.target);
alert($target.text());
})
.appendTo($studentList);
});
}, 1000);
</script>
</body>
</html>
Raw
data.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>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<ul></ul>
<script>
$(() => {
const scores = {
Good: 0,
Evil: 0
};
const $ul = $('ul');
for(key in scores){
$('<li>')
.text(`${key}: ${scores[key]}`)
.data({team: key})
.appendTo($ul);
}
$('li').on('click', (evt) => {
const $clickedLi = $(evt.target);
const team = $clickedLi.data('team');
scores[team] += 1;
console.log(scores);
$clickedLi.text(`${team}: ${scores[team]}`);
});
});
</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>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</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>
$(() => {
$('li').on('click', (evt) => {
evt.target.remove();
});
const $form = $('form');
const $contentInput = $form.find('input[name=content]');
const $ul = $('ul');
$form.submit((evt) => {
evt.preventDefault();
$('<li>')
.text(`Bucket of ${$contentInput.val()}`)
.on('click', (evt) => { evt.target.remove(); })
.appendTo($ul);
// Set the value to blank
$contentInput.val('');
})
});
</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>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script> <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>
console.log('Select by class:', $('.title'));
console.log('Select by id:', $('#bucket-list'));
console.log('Select by element:', $('h1'));
console.log('Select in context:', $('ul').find('li'));
</script>
</body>
</html>
Raw
ready.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>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<style>
.tomato{
color: tomato;
}
</style>
</head>
<body>
<script>
$(() => {
const $bucketList = $('#bucket-list');
console.log($bucketList.length);
$bucketList.addClass('tomato');
});
</script>
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment