to class -- to about -- to syllabus -- to people -- to the library


Using jQuery and DOM manipulation in console + homework

Evanna’s presentation

Parasite Homework for Thursday

0) Follow these steps, then experiment with other properties to play with the elements on your chosen website. Remember to save all the useful lines of code that you enter into console on to a different file. This will be the start of your browser extension. Have fun, and remember, it’s all just javascript.

1) find a website you’re interested in working with. Ideally this is a website that:

2) use DOM elements to play around with the CSS on this webpage = "red";‘url(“”)’

document.getElementsByClassname('yourClassHere') querySelector('yourCSSSelectorHere!').

document.querySelector('img').remove() document.getElementById('yourIdHere').innerHTML("this replaces what's inside the HTML tags")

3) use jQuery to select objects on the page and manipulate their CSS. You may have to install jQuery to do this! just paste the whole thing into the console.

$('div').css({"background-color": "red", "filter" : "blur(5px)"})

$('div').css({"transform" : "rotate(5deg)"})

$('div').click( function() { $(this).css({"background-color": "orange"}) })

4) Use .appendChild with a variable to create a new DOM node (e.g. a new <p>paragraph</p> inside an article).

var para = document.createElement("p");

var node = document.createTextNode("this text is new!");



OR if you want to append it to a class:


OR use jQuery:


var element = document.getElementById(“div1”); element.appendChild(para); </script>

4.1) Consider for example how you could combine this appendChild with .click() and a library of text to create a hypertext story where elements are added or revealed…

5) What other DOM elements or jQuery effects can you play with? Consider:

tips for common errors:

By class selector, with a full stop, i.e. $('.class')
By Id selector, with a hash symbol, i.e. $('#id')

$('.thumb, .tright')