Lesson 3.8. Changing HTML

.innerText

So far, we have mostly used the innerHTML property which modify the content of an HTML tag. There are other properties that allow to modify other properties of HTML elements:

let element = getElementById ('MyID');
element.innerText = "New Content";

.innerHTML

With innerText you can only insert text. If you want to insert HTML, you must use the innerHTML property:

element.innerHTML = '<img src="image.jpg">';

The above example add an image in the HTML tag.

.style

The .style property modifies the CSS style of an HTML tag. The general syntax is presented below:

element.style.property = new_style;

• .property must be replaced by CSS property (.color, .font, .padding, .width, ...) ;
• new_style is the value of the new property (red, 100px...)

Here are some examples:

element.style.color = 'red';
element.style.fontWeight = 'bold';
element.style.backgroundColor = '#FF00FF';
element.style.paddingTop  = '100px';

The baove example changes the sytle of a paragrph:

setAttribute

The setAttribute() function is used to modify the attribute of an HTML tag. The general syntax is given by :

element.setAttribute(name, value)

Here are some examples:

element.setAttribute('src',  "image.png";
element.setAttribute('href', "https://www.google.com";
element.setAttribute('style', "color:red;";

The above example changes the src attribute of an image:

Exercises

Exercise 1

Modify the code below so that the text takes the color of the clicked button:

<p id="text">Click to change my color.</p>

<button>Red</button>
<button>Green</button>
<button>Blue</button>
<button>Black</button>

Here is the expected result:

Exercise 2

Modify the code below so that the link is modified when the user clicks on it. The new link will be https://lucidar.me/fr/:

<a href="https://www.google.com" target="_blank">Google</a>

Note that this type of link is to be avoided. Here is the expected result:

Quiz

Which property allows you to change the text of a tag?

---

What syntax allows you to modify the style of an HTML tag?

---

Which syntax allows you to modify the following image:

<img src="sad.jpg">

---

See also

• Web development class
• Lesson 1.1. History of the Internet
• Lesson 1.2 Introduction to HTML
• Lesson 1.3. Special characters in HTML
• Lesson 1.4. Comments in HTML
• Lesson 1.5. Global structure of HTML pages
• Lesson 1.6. Hyperlinks in HTML
• Lesson 1.7. ID attribute in HTML tags
• Lesson 1.8. HTML anchors
• Lesson 1.9. Images in HTML pages
• Lesson 1.10. HTML tables
• Lesson 1.11. Most used HTML tags
• Lesson 1.12. Some advice
• Lesson 1.13. Ressources
• Lesson 2.1. Introduction to CSS
• Lesson 2.2. Inline CSS
• Lesson 2.3. Internal CSS
• Lesson 2.4. External CSS
• Lesson 2.5. CSS selectors
• Lesson 2.6. CSS colors
• Lesson 2.7. Margin and padding
• Lesson 2.8. CSS units
• Lesson 2.9. Most used CSS properties
• Lesson 3.1. History of JavaScript
• Lesson 3.2. JavaScript Hello World
• Lesson 3.3. Console.log
• Lesson 3.4. Comments in JavaScript
• Lesson 3.5. Variables in JavaScript
• Lesson 3.6. JavaScript events
• Lesson 3.7. Document Object Model (DOM)
• Lesson 3.8. JavaScript frameworks
• Lesson 4.1. Introduction to PHP
• Lesson 4.2. PHP tags
• Lesson 4.3. PHP variables
• Lesson 4.4. isset vs empty vs is_null
• Lesson 4.5. PHP operators
• Lesson 4.6. PHP quotes
• Lesson 4.7. Tests in PHP: if .. else
• Lesson 4.8. PHP arrays
• Lesson 4.9. PHP loops
• Lesson 4.10. PHP sessions
• Lesson 5.1. HTML forms
• Lesson 5.2. HTML forms, POST or GET?
• Lesson 5.3. Input fields
• Lesson 5.4. HTML form fields
• Lesson 6.1. Introduction to MySQL
• Lesson 6.2. phpMyAdmin
• Lesson 6.3. SQL queries
• Lesson 6.4. Connect to MySQL in PHP
• Lesson 6.5. SQL queries in PHP
• Lesson 6.6. Getting data from MySQL in PHP
• Lesson 6.7. Get last ID

---