DOM 操作 HTML - 嵌套在按钮标签内的图标答案

【问题标题】：DOM manipulating HTML - icon nested inside button tagDOM 操作 HTML - 嵌套在按钮标签内的图标
【发布时间】：2021-05-29 09:26:47
【问题描述】：

我现在正在构建一个待办事项列表，并且想知道 innerHTML 的用法。如果我想要一个按钮标签内的图标：

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

这是<button><i class="fas fa-times fa-lg"></i></button> 对吗？

上面和下面有什么区别？

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

【问题讨论】：

不同的运算符。你看不出来吗？？
@AlonEitan 我知道。我在问哪个在做嵌套标签

标签： javascript html css web dom

【解决方案1】：

第一个替换按钮内的所有内容添加新图标

例如，如果您有一个名为“click”的按钮，则该名称将被新图标替换

在第二种情况下，将在名称“click”之后添加一个图标

【讨论】：

那么第二个嵌套在按钮标签内？
你有一个这样的按钮在第二个操作按钮之后等于这样

【解决方案2】：

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

这行代码将替换innerHTML 为btn

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

这行代码会将<i class="fas fa-times fa-lg"></i>追加到btn中，但是当btn为空时，效果与btn.innerHTML = '<i class="fas fa-times fa-lg"></i>';一样

这里有一些简单的演示：

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>

【讨论】：

【解决方案3】：

你要明白2个赋值语句的区别

var name = (equals) 设置你想要的值

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

var age = 23
console.log(age)
23

（你已经声明了变量name，所以不需要再用var关键字声明）

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

+= 如何与字符串一起工作是它连接它们这是一种更短的写作方式

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"

数字表现不同 += 成为加/加运算符添加到已存储在 b 中的内容（对于数字，您也可以使用 -=（减号）、*=（乘）和 /=（除）

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

减号

b-=3
console.log(b)
1

除法

b /= 2
console.log(b)
0.5

相乘

b *= 50
console.log(b)
25

回到您的问题我使用了一个 js 对象，因此 innerHTML 成为该对象的一个属性，您可以在 console.logs 中轻松看到该值的变化

var btn = {} // decalre 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>"}

我希望这是一个更彻底的解释

【讨论】：