Presentation is loading. Please wait.

Presentation is loading. Please wait.

JavaScript innerHTML. Changing Text with innerHTML Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs.

Similar presentations


Presentation on theme: "JavaScript innerHTML. Changing Text with innerHTML Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs."— Presentation transcript:

1 JavaScript innerHTML

2 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.

3 JavaScript innerHTML JavaScript Code: function changeText(){ document.getElementById('cc').innerHT ML = "popo"; } Welcome to the site Ajith

4 JavaScript innerHTML 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.

5 JavaScript innerHTML function changeText2(){ var userInput = document.getElementById('userInput').value; document.getElementById('bo').innerHTML = userInput; } Welcome to the site popo

6 JavaScript innerHTML 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.

7 JavaScript innerHTML function changeText3(){ var oldHTML = document.getElementById('para').innerHTML; var newHTML = " " + oldHTML + " "; document.getElementById('para').innerHTML = newHTML; } Welcome to the site dude

8 JavaScript innerHTML


Download ppt "JavaScript innerHTML. Changing Text with innerHTML Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs."

Similar presentations


Ads by Google