What is innerHTML?

In complex applications where it is necessary to create several elements at the same time, the generated JavaScript code can be extensive using the innerHTML property. This property was introduced by Microsoft allowing to read and write the HTML content of an element. According to abbreviationfinder, HTML stands for HyperText Markup Language.

For example, you can easily create a table with multiple cells and then insert it into the page with innerHTML: var table = ‘

Cell 1 Cell 2 Cell 3

‘; document.getElementById (“data”). innerHTML = table;

Deleting a text element or node

Existing and new nodes can be deleted. The removeChild method allows removing child nodes to any node by simply passing it the references of the child node [to] remove and its corresponding parent. For better compression, go back to the previous example:

<p id = “mwEnlaces”>

<a id=”editor” href=”editorial.html”> Editorial </a> </p>

The removeChild method will be used to remove the hyperlink from the parent paragraph element:

var anchor = document.getElementById (“editor”);

var parent = anchor.parentNode; var removedChild = parent.removeChild (anchor);

The variable childRemoved still refers to the element, so it was removed but not destroyed, and cannot be located anywhere in the DOM. This is available in memory as if it were created using the createElement method. This allows it to be positioned anywhere else on the page.

Reading and writing the attributes of an element

The most frequently used parts of an HTML element are its attributes, such as: id, class, href., Title, CSS styles, among many other pieces of information that can be included in an HTML tag.

The attributes of a tag are translated by the browser into properties of an object. Two methods exist to read and write the attributes of an element, getAttribute allows to read the value of an attribute while setAttribute allows its writing.

Sometimes it is necessary to see the properties and methods of a certain element, this can be done through the following utility function:

function inspector (el) {

var str = “”; for (var i in el) {str + = I + “:” + el.getAttribute (i) + “\ n”; } alert (str); }

To use the inspector () function, you just have to pass the reference to the element, continuing with the previous example results in: var anchor = document.getElementById (“editor”);

inspector (anchor); To modify the title attribute of the hyperlink, an element referenced by the anchor variable, the setAttribute will be used, passing it the name of the attribute and the value:

var anchor = document.getElementById (“editor”);

anchor.setAttribute (“title”, “Programming articles”); var newTitle = anchor.getAttribute (“title”);

The value of the newTitle variable is now “Programming Articles”.

Manipulating element styles

As seen, the attributes that are assigned to HTML tags are available as properties of their corresponding nodes in the DOM. Style properties can be applied through the DOM.

Each CSS attribute has an equivalent DOM property, being formed with the same name as the CSS attribute but without the hyphens and capitalizing the first letter of the words. See the following example for a better understanding where a CSS model attribute is used:

some-attribute-css

It will have as equivalent the following property or method in Javascript: someCssAttribute Therefore, to change the CSS font-family attribute of an element, the following could be done:

anchor.style.fontFamily = ‘sans-serif’;

CSS values ​​in Javascript will be mostly of type string; for example: font-size, since it has dimensions such as “px”, “%”. Only fully numeric attributes, such as z-index will be of type integer.

In many cases it is necessary to appear and disappear a certain element, for them the CSS display attribute is used, for example, to disappear:

anchor.style.display = ‘none’;

Then to show it again, another value is assigned:

anchor.style.display = ‘inline’;

Example: Attach multiple files at once

This is the first complete example where it is proposed to use the manipulation of the DOM by means of javascript in order to add as many input elements of the file type as as many files are desired to be uploaded to the server.

A simplified version of the problem is shown limited only to the client side. For this, it is necessary to imagine an online system where files are uploaded to the server, an example of this could be an email application.

<! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 // EN”

” http://www.w3.org/TR/html4/strict.dtd “> <html> <head> <title> Example for attaching multiple files </title> <script language = “javascript” type = “text / javascript “> function newFile () {var input = document.getElementsByTagName (” input “) [0]; var newInput = input.cloneNode (true); input.parentNode.appendChild (newInput); } </script> </head> <body> <form action = “upload.php” method = “post” enctype = “multipart / form-data”> <fieldset> <legend> Attach multiple files </legend> < input name = “files []” type = “file” size = “60”> </fieldset> <a href=”javascript: newFile();”> Attach another file </a> <

The link to attach another file makes a call to the function nuevoFichero () performing the following tasks in it: Access to the first input element found in the document:

var input = document.getElementsByTagName (“input”) [0];

  • A new input element referenced by the newInput variable is created using the cloneNode method, resulting in an element identical to the first one: var newInput = input.cloneNode (true); · Here the parent node of the input element is accessed through the parentNode method and at the same time a new child element is inserted, a copy of the first one through the appendChild method:

input.parentNode.appendChild (newInput);

It should be noted that in this example the click event could have been used for the function call, although it was left reserved for when the subject of DOM event handling is addressed.

Example: Slide show

This example includes a slide show (in this case images). There are two links, one to show the next slide and the other to show the previous slide. A possible practical application could be in a photo gallery.

<! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 // EN”

” http://www.w3.org/TR/html4/strict.dtd if (container.childNodes.length == 0) container.appendChild (slides [counter]); else container.replaceChild (slides [counter], container.childNodes [0]); } </script> </head> <body> <a href=”javascript: back();”> Back </a> <img src = “slide1.jpg” alt = “Slide 1” height = “100” width = “200”> <img src = “slide2.jpg” alt = “Slide 2” height = “100” width = “200 “> <img src =” slide3.jpg “alt =” Slide 3 “height =” 100 “width =” 200 “> <a href=”javascript: forward();”> Forward </a> </body> </html> <script type = “text / javascript”> start (); putImage (); </script>

This example will be analyzed in an abbreviated way, leaving a detailed analysis by the reader. There are two global variables, counter and slides, the first to indicate the slide that is currently being shown and the last to store the set of slides to be shown in an arrangement. The start () function removes all img elements and stores them. It should be noted that all child nodes of the node with parasitic slides id (example: newline) are eliminated to avoid a later malfunction.

On the other hand, the function putImage () is in charge of placing the image pointed by the counter in the slide container. While the back () and forward () functions are responsible for decreasing and increasing the counter respectively.

innerHTML