Month: April 2021

Sometimes, we want to prepend or append a child element in a parent element on our web page.

In this article, we’ll look at how to prepend and append an element with regular JavaScript.

Prepend an Element

We can prepend an element by using the insertBefore method.

For instance, if we have the following HTML:

<div id='parent'>  
  <p>  
    hello world  
  </p>  
</div>

Then we can prepend an element before the p element in the div by writing:

const parent = document.getElementById("parent");  
const child = document.createElement("div");  
child.innerHTML = 'Are we there yet?';  
parent.insertBefore(child, parent.firstChild);

We get the div with document.getElementById .

Then we create a div with document.createElement .

And then we add some content to the child div by setting the innerHTML property.

Finally, we call parent.insertBefore with the child element we want to insert and parent.firstChild to prepend child before the first child node of parent .

Append an Element

We can append an element into a container element by using the appendChild method.

For instance, if we have the following HTML:

<div id='parent'>  
  <p>  
    hello world  
  </p>  
</div>

Then we can add a child after the p element by writing:

const parent = document.getElementById("parent");  
const child = document.createElement("div");  
child.innerHTML = 'Are we there yet?';  
parent.appendChild(child);

The first 3 lines are the same as the previous example.

The only difference is that we call parent.appendChild with child to add child after the p element.

Conclusion

We can use the insertBefore method to prepend an element as the first child element.

And we can use the appendChild method to add a child element as the last child of the parent element.

Sometimes, we want to format a moment.js date as a 24-hour date-time.

In this article, we’ll look at how to format a moment.js date as a 24-hour date-time.

Use the HH Formatting Tag

We can use the HH formatting tag to format the hour into 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")  
console.log(date)

Then we get:

'13:15:00'

as a result.

Use the H Formatting Tag

Alternatively, we can use the H formatting tag to format the hour to 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("H:mm:ss")  
console.log(date)

Then we also get:

'13:15:00'

as a result.

Conclusion

We can use the H or HH formatting tag to format the hour of a date-time as a 24-hour format time.

Oftentimes, we want to unpack JavaScript array entries into their own variables.

In this article, we’ll take a look at how to unpack a JavaScript array into separate variables with JavaScript.

Use the Destructuring Syntax

We should use the JavaScript array destructuring syntax to unpack JavaScript array entries into their own variables.

For instance, we can write:

const [x, y] = ['foo', 'bar'];
console.log(x);
console.log(y);

Then we assign 'foo' to x and 'bar' to y .

So x is 'foo' and y is 'bar' .

We can assign an array directly to variables on the left side.

For instance, we can write:

const arr = ['one', 'two'];
const [one, two] = arr;

We assign 'one' to one and 'two' to two .

Also, we can set a default value in case a value isn’t assigned to the variable.

To do this, we write something like:

const [one = 'one', two = 'two', three = 'three'] = [1, 2];
console.log(one);
console.log(two);
console.log(three);

We assign default values to one , two and three with the assignment statements on the left side.

So one is 1, two is 2, and three is 'three' .

three is 'three' since there’s no array entry assigned to it.

Conclusion

We can unpack JavaScript array entries into their own variables easily by using the destructuring syntax.

Sometimes, we may run into the “document.getElementByClass is not a function” error in the console when we run our JavaScript code.

In this article, we’ll look at how to fix the “document.getElementByClass is not a function” error in our JavaScript code.

The Correct Method Name is document.getElementByClassName

The correct method name for the method that we use to get the elements with a given class name is the document.getElementByClassName method.

For instance, if we have the following HTML:

<div class='text'>
  foo
</div>
<div class='text'>
  bar
</div>
<p>
  baz
</p>

Then we can get all the elements with the class attribute set to text by writing:

const texts = document.getElementsByClassName("text");
console.log(texts)

We call document.getElementsByClassName with the class attribute value for the elements we want to select.

Therefore texts is an HTMLCollection object with the divs with the class text in it.

Conclusion

To get all the elements with the given class attribute value, we use the document.getElementsByClassName method.

There is not document.getElementsByClass method in the browser.

This will stop us from running into the run into the “document.getElementByClass is not a function” error when we run our JavaScript code.

Sometimes, we’ve to check variable equality against a list of values in JavaScript.

In this article, we’ll look at how to check variable equality against a list of values in JavaScript.

Use the Array.prototype.indexOf Method

We can use the JavaScript array’s indexOf method to check if a value is included in the list of values in the array.

For instance, we can write:

let foo;
//...
if ([1, 3, 12].indexOf(foo) > -1) {
  //...
}

We have the foo variable and we check if foo is 1, 3 or 12 by putting those values in an array and then call the indexOf method of the array with foo .

Then if it returns a number bigger than -1, we know foo is one of the values listed in the array.

Use the Array.prototype.includes Method

Another array method we can use to check if a variable is one of the values in a list is to use the includes method.

For instance, we can write:

let foo;
//...
if ([1, 3, 12].includes(foo)) {
  //...
}

We call includes the way we call indexOf .

If includes returns true , then we know foo is one of the values in the array.

Conclusion

We can put the list of values we want to check in an array and then use the includes or indexOf method to check if the variable is in the array.