The Web Dev

We can create an HTML element with JavaScript that has various attributes by calling a few methods and setting a few properties.

First, we call the document.createElement method with the tag name of the element that we want to create as a string.

Then we set the attributes of our newly created element by setting the properties of the newly created object.

Finally, we attach the element to the element that we want our element to be in as a child element by calling the appendChild method of the element that want our element to stay inside of with our newly created element as the argument.

For instance, if we create a new input element, we write:

const input = document.createElement('input');

to create an element with the input tag.

Then we can set the type, id, name, value, and readonly attributes of our newly created input element by writing:

input.id = 'foo-input';
input.name = 'foo';
input.value = 'bar';
input.readOnly = true;

We set the id property to set the id attribute of our input element.

The name property sets the name property of our element.

value sets the value attribute of our element.

And readOnly sets the readonly attribute of our element. The case is different with this attribute. In HTML, it’s readonly and in JavaScript it’s readOnly.

Once we did that, we can call appendChild on the parent element that we want our input element to be in with the input element as the argument.

For instance, if we want the input element we created to be in the body element, we can write:

document.body.appendChild(input);

Once we did that, we should see something like:

<input id="foo-input" name="foo" readonly="">

when we inspect the element. And ‘bar’ will be displayed on the screen inside the input box.

We can create an element with attributes with JavaScript by first calling createElement, then we can set the properties which correspond to the HTML attribute that we want to set.

Then to display it, we call appendChild on the parent element that we want our element to be displayed in with our newly created object as the argument.

We can add a style to an element by using the style property of an object.

To style an element, first we have to get the element that we want to style.

We can do this easily with document.querySelector, which takes a string with any CSS selector.

For instance, if we have the following div:

<div class='foo'>
  foo
</div>

We can get div by the class. We can write:

const el = document.querySelector('.foo');

to get the div element with the class foo that we have above.

Then we can set the styles according to the properties list below at MDN.

The CSS and the JavaScript equivalents are listed on that page.

For instance, if we want to set the color of the content inside the div we have above, we can set the color property as follows:

el.style.color = 'green';

The code above sets the color property of the style property to 'green'.

This will turn the text in the div green.

We can do the same thing with any property name in the ‘JavaScript’ column at this page.

We can set the style of an element is simple with JavaScript. However, we shouldn’t do that too frequently so that our browsers won’t be too busy setting styles for elements with JavaScript.