Greasemonkey Hacks

Hack #6. Add or Remove Content on a Page

Use DOM methods to manipulate the content of a web page.

Since most user scripts center around adding or removing content from a web page, let's quickly review the standard DOM methods for manipulating content.

Adding an Element

The following code adds a new element to the end of the page. The element will appear at the bottom of the page, unless you style it with CSS to position it somewhere else [Hack #7] :

	var elmNewContent = document.createElement('div');
	document.body.appendChild(elmNewContent)

Removing an Element

You can also remove elements from a page. Removed elements disappear from the page (obviously), and any content after them collapses to fill the space the elements occupied. The following code finds the element with id="ads" and removes it:

	var elmDeleted = document.getElementById("ads");
	elmDeleted.parentNode.removeChild(elmDeleted);

Tip

If all you want to do is remove ads, it's probably easier to install the AdBlock extension than to write your own user script. You can download AdBlock at http://adblock.mozdev.org.

Inserting an Element

Many user scripts insert content into a page, rather than appending it to the end of the page. The following code creates a link to http://www.example.com and inserts it immediately before the element with id="foo":

 var elmNewContent = document.createElement('a'); elmNewContent.href = 'http://www.example.com/'; elmNewContent.appendChild(document.createTextNode('click here')); var elmFoo = document.getElementById('foo'); ...