Javascript DOM操作HTML-嵌套在按钮标记中的图标

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

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

btn.innerHTML=''；

哪个是

我说得对吗

上面和下面的区别是什么

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

btn.innerHTML+=''；

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

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

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

这一行代码将

附加到

btn

中，但当

btn

为空时，其效果与

btn.innerHTML=''相同

这里有一些简单的演示：


var btn1=document.getElementById（“btn1”）；
var btn2=document.getElementById（“btn2”）；
var btn3=document.getElementById（“btn3”）；
btn1.innerHTML=''；
btn2.innerHTML+=''；
btn3.innerHTML+=''

里面的东西
里面的东西
您必须理解这两个赋值语句之间的差异

var name=（等于）将值设置为您想要的值

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

var age = 23
console.log(age)
23

（您已经声明了变量名，因此无需使用var关键字再次声明）

+=处理字符串的方式是将它们连接起来
这是一种较短的写作方式

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中的内容相加
（对于数字，您还可以执行-=（减）、*=（乘）和/=（除）

负例

以身作则

乘法示例

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

var btn={}//decare空js对象
未定义
btn.innerHTML=''；//赋值
控制台日志（btn）
{innerHTML:}
btn.innerHTML+=''；
控制台日志（btn）；
{innerHTML:}
btn.innerHTML='返回原始'；
控制台日志（btn）；
{innerHTML:“返回原始”}

我希望这是一个更彻底的解释
不同的操作符。你看不出来吗？？？@AlonEitan我知道。我问的是哪一个在做嵌套标记，所以第二个嵌套在按钮标记内？在第二个操作按钮后，你有一个类似于此的按钮，与此相同
var name = "blaqkippah"
console.log(name)
blaqkippah

var age = 23
console.log(age)
23

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 = 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

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>"}