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

Order of callback execution in jQuery's ready function

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can JavaScript event listeners be compelled to trigger in a specific sequence?

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

Tips for effectively placing a page scope block using BEM

Converting Excel values to Exponential format using Python

Immersive pop-up interface displaying a variety of embedded videos simultaneously

Replace the image source with a list of images

Unexpected bug encountered while implementing redux

Using getJSON to return key/value pair from local host URL in JSFiddle - A step-by-step guide

Guide to retrieving the previous URL in Angular 2 using Observables

Avoid showing duplicate values in the optgroup selection

Encountered an issue while attempting to write to SQLite, error code 6 is

Is it possible for me to transform this code into a useful helper function?

Adjust the content within an HTML div by utilizing AngularJS

Is there a way to automatically update the URL to include $_GET['data'] (media.php?data=123) when a selection is made from a dropdown list?

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

Tips on preventing duplication of APIs when retrieving data using nextjs

Having trouble retrieving cookie in route.ts with NextJS

The validation of the form does not seem to be functioning properly when the 'required' rule is used