/

HTML / CSS / JavaScript Tutorial

Creating and Accessing HTML Elements using JavaScript

[this page | pdf | back links]

More advanced webpages typically use JavaScript to manipulate individual HTML elements on a webpage. For example, HTML <a> (i.e. anchor) elements can be created or accessed using JavaScript as follows:

 

Create:

e.g. var x = document.createElement("A")

Access:

e.g. var x = document.getElementById(ElementId)

 

Here the ElementId is the id attribute of the element. The A is the JavaScript DOM name for an anchor element. Occasionally the most natural way to access an element does not involve its id attribute in which case there are other possible approach, see detail on individual elements.

 

For some types of elements (e.g. because there will only typically be one of them in any given document, or because they can be accessed via a specific document property) there may be other simpler ways of accessing the element. For example. the following elements might more commonly be accessed as follows:

 

Element

Alternative ways of accessing them through JavaScript, e.g.

<body>

var x = document.getElementsByTagName("BODY")[0] or

var x = document.body

<head>

var x = document.getElementsByTagName("HEAD")[0]

<html>

var x = document.getElementsByTagName("HTML")[0] or

var x = document.documentElement

<iframe>

var x = window.frames[x]

<title>

var x = document.getElementsByTagName("TITLE")[0]

 

Some types of element come in various types, and it is also in practice necessary to set their type when they are created, e.g.:

 

Element

Steps to create relevant element type

<input>

e.g. var x = document.createElement("INPUT")

then the type of <input> element needs to be set, e.g.:

x.setAttribute("type", ElementType)

where ElementType is e.g. button or checkbox, …

 

To add elements that don’t reside within any single element inside the document body (such a <datalist> element, you should first create it and then add it to the document.body object.

 

JavaScript DOM object names corresponding to different HTML elements supported by HTML 5 include:

 

Element

JavaScript DOM name

More

<a>

A

Here

<abbr>

ABBR

Here

<address>

ADDRESS

Here

<area>

AREA

Here

<article>

ARTICLE

Here

<aside>

ASIDE

Here

<audio>

AUDIO

Here

<b>

B

Here

<base>

BASE

Here

<bdi>

BDI

Here

<bdo>

BDO

Here

<blockquote>

BLOCKQUOTE

Here

<body>

BODY

Here

<br>

BR

Here

<button>

BUTTON

Here

<canvas>

CANVAS

Here

<caption>

CAPTION

Here

<cite>

CITE

Here

<code>

CODE

Here

<col>

COL

Here

<colgroup>

COLGROUP

Here

<data>

DATA

Here

<datalist>

DATALIST

Here

<dd>

DD

Here

<del>

DEL

Here

<details>

DETAILS

Here

<dfn>

DFN

Here

<dialog>

DIALOG

Here

<div>

DIV

Here

<dl>

DL

Here

<dt>

DT

Here

<em>

EM

Here

<embed>

EMBED

Here

<fieldset>

FIELDSET

Here

<figcaption>

FIGCAPTION

Here

<figure>

FIGURE

Here

<footer>

FOOTER

Here

<form>

FORM

Here

<h1>

H1

Here

<h2>

H2

Here

<h3>

H3

Here

<h4>

H4

Here

<h5>

H5

Here

<h6>

H6

Here

<head>

HEAD

Here

<header>

HEADER

Here

<hr>

HR

Here

<html>

HTML

Here

<i>

I

Here

<iframe>

IFRAME

Here

<img>

IMG

Here

<input>

INPUT

Here

<ins>

INS

Here

<kbd>

KBD

Here

<keygen>

KEYGEN

Here

<label>

LABEL

Here

<legend>

LEGEND

Here

<li>

LI

Here

<link>

LINK

Here

<main>

MAIN

Here

<map>

MAP

Here

<mark>

MARK

Here

<menu>

MENU

Here

<menuitem>

MENUITEM

Here

<meta>

META

Here

<meter>

METER

Here

<nav>

NAV

Here

<noscript>

NOSCRIPT

Here

<object>

OBJECT

Here

<ol>

OL

Here

<optgroup>

OPTGROUP

Here

<option>

OPTION

Here

<output>

OUTPUT

Here

<p>

P

Here

<param>

PARAM

Here

<picture>

PICTURE

Here

<pre>

PRE

Here

<progress>

PROGRESS

Here

<q>

Q

Here

<rp>

RP

Here

<rt>

RT

Here

<ruby>

RUBY

Here

<s>

S

Here

<samp>

SAMP

Here

<script>

SCRIPT

Here

<section>

SECTION

Here

<select>

SELECT

Here

<small>

SMALL

Here

<source>

SOURCE

Here

<span>

SPAN

Here

<strong>

STRONG

Here

<style>

STYLE

Here

<sub>

SUB

Here

<summary>

SUMMARY

Here

<sup>

SUP

Here

<table>

TABLE

Here

<tbody>

TBODY

Here

<td>

TD

Here

<textarea>

TEXTAREA

Here

<tfoot>

TFOOT

Here

<th>

TH

Here

<thead>

THEAD

Here

<time>

TIME

Here

<title>

TITLE

Here

<tr>

TR

Here

<track>

TRACK

Here

<u>

U

Here

<ul>

UL

Here

<var>

VAR

Here

<video>

VIDEO

Here

<wbr>

WBR

Here

 


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile