Changing content with JavaScript

InnerHTML

A simple way to change text in JavaScript is by using the innerHTML method. It allows you to change to content within an element. It is assigned to a string in JavaScript.

documnet.getElementById('edit-me').innerHTML = 'Edited!' //It is important to make sure that the HTML is upper case, or else it will throw an error.

Changing an objects style

This is extremely frequent with web-apps, as it can also be used to create pop-ups. Changing style allows you to change almost every possible css property. In css, properties frequtently have hyphens in them. JavaScript does not allow for hyphens, so we use camelCasing. camelCasing is where the first word is not capitalized, but every other word is. thisIsCamelCasing. A property like font-size becomes fontSize when in JavaScript. Whenver you want to change style, you add '.style' at the end of the element, and than add what you want to change.

const changeMe = document.getElementById('a')
changeMe.style.color = red
//Changes the element with an id of 'a' to be red.
changeMe.style.fontSize = 20px
//Makes changeMe's text size equal to 20px.

You can find all changable styles here.

There are many ways to change content, but these are the most simple. Tip! Want to make a pop-up? Look at the simple code behind this web page