To see javascript affecting HTML documents look at the following code snippet. In particular look at the javascript code on line 8 in-between the ‘script’ tags.

Javascript Affecting HTML Documents. Text Added With Javascript.
On line 8 document.write() adds text to the html document.

Javascript Affecting HTML Documents. H1 heading with text.
On line 8 the ‘h1’ tags have been included with the text in document.write(). The html ‘h1’ tags cause the size of the text to increase.

In the above example the h1 element in document.write() becomes a node in the document. To view the document with the newly created ‘h1’ node is possible by right clicking in the browser window and selecting ‘Inspect Element’.

Javascript Affecting HTML Documents. Inspect Element.
Right click in the browser window and select ‘Inspect Element’.

Selecting ‘Inspect Element’ will open the ‘Web Inspector’. If the ‘Elements’ tab is selected the html document with the newly created ‘h1’ node will be visible.

Javascript Affecting HTML Documents. Web Inspector.
The ‘Web Inspector’ with the html document showing a newly created ‘h1’ node.

Another way to access the ‘Web Inspector’ is by pressing “command option i” at the same time.

A third way to access the ‘Web Inspector’ is to locate it in the top menu bar. The only difficulty with locating it in the menu bar is that it is in different locations for each browser and has a different name.

Javascript Affecting HTML Documents. Safari Logo.
In the ‘Safari’ browser look under the ‘Develop’ on the top menu bar and scroll down to find ‘Show Web Inspector’.

Javascript Affecting HTML Documents. Show Web Inspector.
Choose ‘Show Web Inspector’ from the ‘Develop’ menu in the top menu bar.

If the ‘Develop’ menu is missing from the top menu bar then you will need to enable it in the ‘Advanced Preferences’ which can be found in the ‘Safari’ menu in the top menu bar.

Javascript Affecting HTML Documents. Preferences menu item.
First open the
‘Preferences’ item in the ‘Safari’ menu.

The ‘Preferences’ pop up box appears and in the far right top corner select the gear icon to open the ‘Advanced Preferences’. At the bottom of the box is a check box to ‘Show Develop menu in menu bar’.

Javascript Affecting HTML Documents. Advanced Preferences.
The check box must be ticked for ‘Show Develop menu in menu bar’.

Javascript Affecting HTML Documents. Chrome Logo.
The Chrome Browser ‘Developer Tools’ are found by going into the ‘View’ menu on the top menu bar. At the bottom of the ‘View’ menu is a ‘Developer’ menu item which opens up to reveal three more items. The ‘Developer Tools’ option will open up the inspector.

Javascript Affecting HTML Documents. Chrome Developer.
Open the ‘Developer’ sub-menu at the bottom of the ‘View’ menu and select ‘Developer Tools’.

Javascript Affecting HTML Documents. Internet Explorer Logo.

Internet Explorer ‘Developer Tools’ can be opened by pressing ‘F12’ or by looking in the ‘Tools’ menu on the top menu bar.


More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *