Practice Simple Loops AH533


Click the button to see counting...

Examining innerHTML Element, which I do not understand

Hello, World!


A general rule of thumb for aspiring JS developers, if you’re just starting out, I highly recommend using the Mozilla Developer Network Documentation (MDN). Its a great source for everything JS.

The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).

Definition and Usage. The getElementById() method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

A full list of DOM Element Object properties/methods are available here > The HTML DOM Element Object

Click me to change my HTML content (innerHTML).



Read your book
tizag.com presents examples >

javascript innerhtml Ever wonder how you could change the contents of an HTML element? Maybe you'd like to replace the text in a paragraph to reflect what a visitor has just selected from a drop down box. By manipulating an element's innerHtml you'll be able to change your text and HTML as much as you like. changing text with innerhtml Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages. However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers. After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.

JavaScript Code:

Welcome to the site dude



Display:

Welcome to the site dude. You now know how to change the text in any HTML element, but what about changing the text in an element based on user input? Well, if we combine the above knowledge with a text input... updating text based on user input By adding a Text Input, we can take to updating our bold text with whatever the user types into the text input. Note: We updated the function a bit and set the id to boldStuff2. JavaScript Code:

Welcome to the site dude

Display: Welcome to the site dude Enter Text Here changing html with innerhtml You can also insert HTML into your elements in the exact same way. Let's say we didn't like the text that was displayed in our paragraph and wanted to updated it with some color. The following code will take the old black text and make it bright white. The only thing we're doing different here is inserting the html element span to change the color. JavaScript Code:

Welcome to the site dude



Display:

Welcome to the site dude This was a pretty simple example for changing the HTML of an element. All we did was take the old text that was in the paragraph tag and surround it in a span tag to change the color. However, there are many more things you can do by changing an element's HTML, so don't forget this useful tool!