Scribd
Upload
42 views

Javascript Changing Website Content

This document contains code to demonstrate changing website content with JavaScript. It includes buttons to change the text in a div, append additional text to a div, and create new text by adding an unordered list to an empty div. Clicking the buttons triggers JavaScript functions that modify the innerHTML of targeted elements on the page.

Uploaded by

Ania Neal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Javascript Changing Website Content

This document contains code to demonstrate changing website content with JavaScript. It includes buttons to change the text in a div, append additional text to a div, and create new text by adding an unordered list to an empty div. Clicking the buttons triggers JavaScript functions that modify the innerHTML of targeted elements on the page.

Uploaded by

Ania Neal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Changing Website Content:

changingwebsitecontent.html
!
!
!

<!doctype html>
<html>
<head>
<title>Learning Javascript</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />



</head>

<body>

<button id="textChanger">Change first div text</button>

<div id="firstDiv">This is some text</div>

<button id="textAppender">Append some text</button>

<div id="secondDiv">Javascript is...</div>



<button id="textCreator">Create some text</button>

<div id="emptyDiv"></div>

<script type="text/javascript">

document.getElementById("textChanger").onclick=function() {

document.getElementById("firstDiv").innerHTML="This is
awesome!";

}

document.getElementById("textAppender").onclick=function() {

document.getElementById("secondDiv").innerHTML=document.getElementById("secondDi
v").innerHTML + "great!";

document.getElementById("textCreator").onclick=function() {

document.getElementById("emptyDiv").innerHTML="<ul><li>Cat</

li><li>Dog</li></ul>";

</script>

</body>
</html>

You might also like