Change HTML with JavaScript

To change the HTML content of an element you can use the getElementById() method. You can first use the method to select the element by its id, then use the innerHTML property to set the new content.

For example:

<div id="example">This is the original content.</div>
<script>
// Get the element by its id
var example = document.getElementById("example");

// Change the content of the element
example.innerHTML = "This is the new content.";
</script>

This will change the content of the <div> element with id example from "This is the original content." to "This is the new content."

Change HTML Attribute Values with JavaScript

To change the value of an HTML attribute using JavaScript, you can use the setAttribute() method on an element. The method takes two arguments: the name of the attribute you want to change, and the new value you want to set.

For example, if you have an input element with an id of example and you want to change the value attribute to "new value".

You can use the following code:

var example = document.getElementById("example");
example.setAttribute("value", "new value");

You can also use this syntax to change the attribute value

document.getElementById("example").value = "new value";

Additionally, you can also update the attribute using the attributeName property

document.getElementById("example").attributeName = "new value";

It's important to note that the setAttribute method can only change the value of the attribute, it will not change the property of the element.

So, if you want to change the value of an attribute that is related to the property of an element, you will need to change the property directly.

Change HTML Styles with JavaScript

There are several ways to change HTML styles using JavaScript. One of the most common ways is to use the style property of an element to directly set the value of a specific CSS property.

For example, if you have a <div> element with an id of example and you want to change the background-color to "blue".

You can use the following code:

var example = document.getElementById("example");
example.style.backgroundColor = "blue";

You can also use the setAttribute() method to change the style attribute of an element.

var example = document.getElementById("example");
example.setAttribute("style", "background-color: blue;");

Additionally, you can also change multiple styles at once by using classList.add() and classList.remove()

var example = document.getElementById("example");
example.classList.add("newStyle");
example.classList.remove("oldStyle");

It's important to keep in mind that you need to use camelCase notation for css properties when accessing it via Javascript, and use hyphen-separated notation when using setAttribute().

Hide HTML Elements with JavaScript

There are several ways to hide HTML elements with JavaScript, here are some of the most common ways:

Using the style property:

var example = document.getElementById("example");
example.style.display = "none";

This will set the display property to none, which will hide the element.

Using classList.add():

var example = document.getElementById("example");
example.classList.add("hidden");

This will add a class of hidden to the element, you need to have a css class .hidden{display:none;} in your stylesheet.

Using setAttribute():

var example = document.getElementById("example");
example.setAttribute("hidden", "");

This will add a hidden attribute to the element, which will hide it in some browser.

It's important to note that if you want to show the element again, you should set the display property to block, remove the hidden class or remove the hidden attribute.

You can also use style.visibility property to hide an element and style.visibility="hidden", this will hide the element but it will still take up the same space as before.

Show HTML Elements with JavaScript

There are several ways to show HTML elements with JavaScript, here are some of the most common ways:

Using the style property:

var example = document.getElementById("example");
example.style.display = "block";

This will set the display property to block, which will show the element.

Using classList.remove():

var example = document.getElementById("example");
example.classList.remove("hidden");

This will remove the class hidden from the element, you need to have a css class .hidden{display:none;} in your stylesheet.

Using removeAttribute():

var example = document.getElementById("example");
example.removeAttribute("hidden");

This will remove the hidden attribute from the element, which will show it in some browser.

You can also use style.visibility property to show an element by setting it to visible, like this example.style.visibility="visible", this will show the element again.

It's important to note that if the element was previously hidden by setting the display property to none, you should set it back to block to show the element again.

JS Basics