Hack 6. Add or Remove Content on a Page

< Day Day Up >

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.

1.7.1. 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)

1.7.2. 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 and removes it:

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

	elmDeleted.parentNode.removeChild(elmDeleted);

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.

1.7.3. 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 :

var elmNewContent = document.createElement('a');

	elmNewContent.href = 'http://www.example.com/';

	elmNewContent.appendChild(document.createTextNode('click here'));

	var elmFoo = document.getElementById('foo');

	elmFoo.parentNode.insertBefore(elmNewContent, elmFoo);

You can also insert content after an existing element, by using the nextSibling property:

elmFoo.parentNode.insertBefore(elmNewContent, elmFoo.nextSibling);

Inserting new content before elmFoo.nextSibling will work even if elmFoo is the last child of its parent (i.e., it has no next sibling). In this case, elmFoo.nextSibling will return null , and the insertBefore function will simply append the new content after all other siblings. In other words, this example code will always work, even when it seems like it shouldn't.

1.7.4. Replacing an Element

You can replace entire chunks of a page in one shot by using the replaceChild method. The following code replaces the element with with content that we create on the fly:

var elmNewContent = document.createElement('p');

	elmNewContent.appendChild(document.createTextNode('Replaced!'));

	var elmExtra = document.getElementById('extra');

	elmExtra.parentNode.replaceChild(elmNewContent, elmExtra);

As you can see from the previous few examples, the process of creating new content can be arduous. Create an element, append some text, set individual attributes…bah. There is an easier way. It's not a W3C-approved DOM property, but all major browsers support the innerHTML property for getting or setting HTML content as a string. The following code accomplishes the same thing as the previous example:

var elmExtra = document.getElementById('extra');

	elmReplaced.innerHTML = '<p>Replaced!</p>';

The HTML you set with the innerHTML property can be as complex as you like. Firefox will parse it and insert it into the DOM tree, just as if you had created each element and inserted it with standard DOM methods.

1.7.5. Modifying an Element's Attributes

Modifying a single attribute is simple. Each element is an object in JavaScript, and each attribute is reflected by a corresponding property. The following code finds the link with and changes its href property to link to a different URL:

var elmLink = document.getElementById('somelink');

	elmLink.href = 'http://www.oreilly.com/';

You can accomplish the same thing with the setAttribute method:

elmLink.setAttribute('href', 'http://www.oreilly.com/')

This is occasionally useful, if you are setting an attribute whose name you don't know in advance.

You can also remove an attribute entirely with the removeAttribute method:

elmLink.removeAttribute('href');

See "Make Pop-up Titles Prettier" [Hack #28] for an example of why this might be useful.

If you remove the HRef attribute from a link, it will still be an <a> element, but it will cease to be a link. If the link has an id or name attribute, it will still be a page anchor, but you will no longer be able to click it to follow the link.