Category: JavaScript Answers

Sometimes, we want to create ul and li elements in JavaScript.

In this article, we’ll look at how to create ul and li elements in JavaScript.

How to create ul and li elements in JavaScript?

To create ul and li elements in JavaScript, we can use the document.createElement method.

For instance, we write:

const createList = (spaceCrafts) => {
  const listView = document.createElement('ol');
  for (const s of spaceCrafts) {
    const listViewItem = document.createElement('li');
    listViewItem.appendChild(document.createTextNode(s));
    listView.appendChild(listViewItem);
  }
  return listView;
}

const spaceCrafts = ['foo', 'bar', 'baz']
const ol = createList(spaceCrafts)
document.body.appendChild(ol)

We create the createList function that takes the spaceCrafts array.

In it, we call document.createElement with 'ol' to create an ordered list element.

Then we loop through the spaceCrafts array with the for-of loop.

In the loop, we call document.createElement with 'li' to create an li element.

And we call listViewItem.appendChild with a text node that we create from a spaceCraft entry s.

Finally, we call listView.appendChild with listViewItem to attach it to the listView as its child.

Next, we call createList with spaceCrafts to create the list.

And then we call document.body.appendChild(ol) to append the ol element as a child of the body element.

Conclusion

To create ul and li elements in JavaScript, we can use the document.createElement method.

Sometimes, we want to convert a JavaScript plain object into model class instance.

In this article, we’ll look at how to convert a JavaScript plain object into model class instance.

How to convert a JavaScript plain object into model class instance?

To convert a JavaScript plain object into model class instance, we can use the Object.assign method.

For instance, we write:

class Model {
  constructor(obj) {
    Object.assign(this, obj)
  }
  print() {
    console.log(this.a);
  }
}

const obj = {
  a: 'a',
  b: 'b',
  c: 'c'
}
const m = new Model(obj)
console.log(m)
m.print()

to call Object.assign with this and obj in the Model class constructor.

This will merge the contents of obj into this.

Next, we instantiate a Model instance with obj.

And then we call m.print to print the content of this.a, which is 'a'.

Conclusion

To convert a JavaScript plain object into model class instance, we can use the Object.assign method.

Sometimes, we want to dynamically add a new column to an HTML table with JavaScript.

In this article, we’ll look at how to dynamically add a new column to an HTML table with JavaScript.

How to dynamically add a new column to an HTML table with JavaScript?

To dynamically add a new column to an HTML table with JavaScript, we can loop through each row and add td elements into them.

For instance, we write:

<table id="table">
  <tr>
    <th><input type="text" value="test 1" /></th>
  </tr>
  <tr>
    <td><input type="text" value="test 2" /></td>
  </tr>
</table>

<button type="button">add column</button>

to add a table with an add column button.

Then we write:

const addColumn = () => {
  for (const [i, row] of [...document.querySelectorAll('#table tr')].entries()) {
    const input = document.createElement("input")
    input.setAttribute('type', 'text')
    const cell = document.createElement(i ? "td" : "th")
    cell.appendChild(input)
    row.appendChild(cell)
  };
}

document.querySelector('button').onclick = addColumn

to add the addColumn function and assign that as the click handler of the button.

In addColumn, we loop through each row with a for-of loop.

In the loop block, we create an input and set the type attribute of it with:

const input = document.createElement("input")
input.setAttribute('type', 'text')

Then we create a new table cell with:

const cell = document.createElement(i ? "td" : "th")

Next, we add the input into the cell with:

cell.appendChild(input)

Finally, we add the column cell to the row with:

row.appendChild(cell)

And we repeat this for the other rows.

Now when we click on the add column button, we see a new column added.

Conclusion

To dynamically add a new column to an HTML table with JavaScript, we can loop through each row and add td elements into them.

Sometimes, we need to fix the ‘RangeError: Invalid time value’ error when calling the JavaScript date’s toISOString method.

In this article, we’ll look at how to fix the ‘RangeError: Invalid time value’ error when calling the JavaScript date’s toISOString method.

How to fix the ‘RangeError: Invalid time value’ error when calling the JavaScript date’s toISOString method?

To fix the ‘RangeError: Invalid time value’ error when calling the JavaScript date’s toISOString method, we should make sure we’re calling toISOString with a Date instance that has a valid date value.

For instance, instead of writing:

const d1 = new Date('undefined').toISOString()

We write:

const d2 = new Date(2022, 1, 1).toISOString()
console.log(d2)

to create a valid Date instance and call toISOString on it.

As a result, we get that d2 is 2022-02-01T08:00:00.000Z.

Conclusion

To fix the ‘RangeError: Invalid time value’ error when calling the JavaScript date’s toISOString method, we should make sure we’re calling toISOString with a Date instance that has a valid date value.

Sometimes, we want to remove numbers from a string using JavaScript.

In this article, we’ll look at how to remove numbers from a string using JavaScript.

How to remove numbers from a string using JavaScript?

To remove numbers from a string using JavaScript, we can use the JavaScript string’s replace method with a regex.

For instance, we write:

const string = 'All23';
const newString = string.replace(/\d+/g, '')
console.log(newString)

to return a string that has all the numbers in string removed.

We call replace with a regex that matches all digits and replace them with empty strings.

As a result, newString is 'All'.

Conclusion

To remove numbers from a string using JavaScript, we can use the JavaScript string’s replace method with a regex.