Categories
HTML JavaScript

Javascript – Create an Element with Attributes

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.

Categories
HTML JavaScript

Javascript – How to Add a Style to an Element

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.

Categories
HTML JavaScript jQuery

How to Find an Element by Name with jQuery

We can find an element with the given name with jQuery by using the $ itself.

For instance, if we want to find something with the name foo, we can write:

$('[name=foo]')

The general form of this CSS selector is:

[attribute=value]

In the example above name is the attribute and foo is the value of the name attribute.

Then that will return the element with the name foo.

Once we did that, if the element exists on the page, then we can do anything with it like adding/removing classes, adding/removing styles, and so on.

Categories
HTML JavaScript jQuery

How to Find an Element by ID with jQuery

We can find an element with the given ID with jQuery by using the $ itself.

For instance, if we want to find something with ID foo, we can write:

$('#foo')

Then that will return the element with the ID foo.

Once we did that, if the element exists on the page, then we can do anything with it like adding/removing classes, adding/removing styles and so on.

Categories
HTML

Is there an input with Type textarea?

There isn’t a input with type textarea.

Instead, we use the textarea tag to create a text area.

This lets us enter text that has multiple rows and longer than an input would allow.

For instance, we can write;

<textarea rows="5" cols="50">

to display a text area with 5 rows and 50 columns wide.

We should pair that with a label tag for better accessibility.

We can write:

<label for="diary">Diary:</label>
<textarea id="diary" rows="5" cols="50">

The value of the for attribute of label should match with the id of the textarea element.

Then everyone including people that rely on screen readers will know what we should enter in the text area.