Manipulating the DOM by nesting an icon within a button element in HTML

Question

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this:

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';

So, would that result in

<button><i class="fas fa-times fa-lg"></i></button>

?

Can someone explain the difference between the code above and the one below?

btn.innerHTML += '<i class="fas fa-times fa-lg"></i>';

javascript html css web dom

Answer 1

Answer №1

To start, simply swap out the current content within the button for a fresh new icon

For example, if your button is labeled "click", this text would seamlessly transition to be represented by the newly added graphic symbol

In another scenario, an additional icon can be inserted immediately after the existing text "click"

Answer 2

To start, simply swap out the current content within the button for a fresh new icon

For example, if your button is labeled "click", this text would seamlessly transition to be represented by the newly added graphic symbol

In another scenario, an additional icon can be inserted immediately after the existing text "click"

Answer 3

Answer №2

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';

This particular code line will set the innerHTML of the btn.

btn.innerHTML += '<i class="fas fa-times fa-lg"></i>';

On the other hand, this code line will add

<i class="fas fa-times fa-lg"></i>

to the existing content inside btn. However, if btn is initially empty, it will produce the same result as

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';

For a simple demo, refer to the following:

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.innerHTML = '<i class="fas fa-times fa-lg"></i>';
btn2.innerHTML += '<i class="fas fa-times fa-lg"></i>';
btn3.innerHTML += '<i class="fas fa-times fa-lg"></i>';

<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
  <button id="btn1" >Something Inside</button>
  <button id="btn2" >Something Inside</button>
  <button id="btn3" ></button>
<body>

Answer 4

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';

This particular code line will set the innerHTML of the btn.

btn.innerHTML += '<i class="fas fa-times fa-lg"></i>';

On the other hand, this code line will add

<i class="fas fa-times fa-lg"></i>

to the existing content inside btn. However, if btn is initially empty, it will produce the same result as

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';

For a simple demo, refer to the following:

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.innerHTML = '<i class="fas fa-times fa-lg"></i>';
btn2.innerHTML += '<i class="fas fa-times fa-lg"></i>';
btn3.innerHTML += '<i class="fas fa-times fa-lg"></i>';

<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
  <button id="btn1" >Something Inside</button>
  <button id="btn2" >Something Inside</button>
  <button id="btn3" ></button>
<body>

Answer 5

Answer №3

It's important to grasp the distinction between the two assignment statements

var name = (equals) sets the value to whatever you want

var name = "blaqkippah"
console.log(name)
blaqkippah

var age = 23
console.log(age)
23

(since variable name has already been declared, there is no need to declare it again with the var keyword)

var name = "blaqkippah"
console.log(name)
blaqkippah

The use of += in conjunction with strings involves joining them together. It provides a more concise way of writing code

name = name + "blah"

name += "deemyBoy"
console.log(name)
blaqkippahdeemyBoy // no space inserted as I wrote += "deemyBoy" not += " deemyBoy" 
ie. when joining 2 strings using += (or any other method) you have to manually add a 
space

var b = 'banana'
b
"banana"
b += ' apple'
"banana apple"
b
"banana apple"
b = 'apple'
b
"apple"

Numbers behave differently with += acting as the plus/addition operator, adding to what's already stored in b (with numbers you can also do -= (minus), *= (multiply) and /= (divide)

b = 2
console.log(b)
2
b += 3
console.log(b)
5
b = 4
console.log(b)
4

An example using minus:

b-=3
console.log(b)
1

An example using divide:

b /= 2
console.log(b)
0.5

An example using multiply:

b *= 50
console.log(b)
25

Returning to your question, I've utilized a JavaScript object so that innerHTML becomes a property on the object, allowing you to easily track the changing values in the console.logs

var btn = {} // declare empty JS object
undefined

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; // assign value
console.log(btn)
{innerHTML: "<i class="fas fa-times fa-lg"></i>"}
btn.innerHTML += '<i class="fas fa-times fa-lg"></i>';
console.log(btn);
{innerHTML: "<i class="fas fa-times fa-lg"></i><i class="fas fa-times fa-lg"></i>"}
btn.innerHTML = '<i class="fas fa-times fa-lg">go back to original</i>';
console.log(btn);
{innerHTML: "<i class="fas fa-times fa-lg">go back to original</i>"}

This should provide a more comprehensive explanation for you

Answer 6

It's important to grasp the distinction between the two assignment statements

var name = (equals) sets the value to whatever you want

var name = "blaqkippah"
console.log(name)
blaqkippah

var age = 23
console.log(age)
23

(since variable name has already been declared, there is no need to declare it again with the var keyword)

var name = "blaqkippah"
console.log(name)
blaqkippah

The use of += in conjunction with strings involves joining them together. It provides a more concise way of writing code

name = name + "blah"

name += "deemyBoy"
console.log(name)
blaqkippahdeemyBoy // no space inserted as I wrote += "deemyBoy" not += " deemyBoy" 
ie. when joining 2 strings using += (or any other method) you have to manually add a 
space

var b = 'banana'
b
"banana"
b += ' apple'
"banana apple"
b
"banana apple"
b = 'apple'
b
"apple"

Numbers behave differently with += acting as the plus/addition operator, adding to what's already stored in b (with numbers you can also do -= (minus), *= (multiply) and /= (divide)

b = 2
console.log(b)
2
b += 3
console.log(b)
5
b = 4
console.log(b)
4

An example using minus:

b-=3
console.log(b)
1

An example using divide:

b /= 2
console.log(b)
0.5

An example using multiply:

b *= 50
console.log(b)
25

Returning to your question, I've utilized a JavaScript object so that innerHTML becomes a property on the object, allowing you to easily track the changing values in the console.logs

var btn = {} // declare empty JS object
undefined

btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; // assign value
console.log(btn)
{innerHTML: "<i class="fas fa-times fa-lg"></i>"}
btn.innerHTML += '<i class="fas fa-times fa-lg"></i>';
console.log(btn);
{innerHTML: "<i class="fas fa-times fa-lg"></i><i class="fas fa-times fa-lg"></i>"}
btn.innerHTML = '<i class="fas fa-times fa-lg">go back to original</i>';
console.log(btn);
{innerHTML: "<i class="fas fa-times fa-lg">go back to original</i>"}

This should provide a more comprehensive explanation for you

Manipulating the DOM by nesting an icon within a button element in HTML

Answer №1

Answer №2

Answer №3

Similar questions

working with JSON array information

What is the best way to store multiple values in local storage using useState in react?

Difficulty encountered while deploying a React application on Netlify

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

The function did not execute properly, resulting in the express route returning no value

The baffling quirks of variables within a Jquery loop

What is the significance of the "#" character in the URL of a jQuery mobile

tips for aligning text to the right of an image

"Successful implementation of Ajax function in local environment but encountering issues when running online

In JavaScript, the mousedown event consistently receives the "e" parameter as the event object

Utilize the identical function value within a Vue template

Boost Google Pagespeed score by reducing 'Total Blocking Time' in NextJs

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

How can the data from a factory be utilized within the same controller but in a separate file in an AngularJS application?

Amazon S3 Landing Page Featuring Contact Form

Place a Button or Link Right Below the Title on the Custom Post Type Editing Page

The Kendo Date Picker is failing to update properly when the k-ng-model is modified

Utilizing Multiple MongoDB Connections in a Node.js Application

How can I make multiple elements in the same column span across multiple rows with CSS Grid?

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?