在 javascript innerHTML 中不能有 class

Question

<div id="myDiv" class="example">Example Text.</div> <button onclick="myFunction()">Click me</button>

我有一个函数可以改变内部 html

myFunction() {

  document.getElementById('myDiv').innerHTML="<ol class="example"><li>Example 1</li><li>Example 2</li><li>Example 3</li></ol>"

}

当我添加 class 时出现错误：意外标识符。为什么是这样？如果我有

Answer 1

使用单引号 '' 设置 class。如果您在双引号内使用双引号 ""，您将遇到您遇到的问题。

myFunction() {

  document.getElementById('myDiv').innerHTML="<ol class='example'><li>Example 1</li><li>Example 2</li><li>Example 3</li></ol>"

}

Answer 2

在 javascript 中，"" 和 '' 都对字符串有效，但是如果我们确实想在字符串中使用 "" 或 '' 会怎样？

var str = "he said to me 'hi'"

没有问题，只要嵌套字符（"或'）分别与外部字符（'或"）不同

所以在你的例子中：

myFunction() {
  document.getElementById('myDiv').innerHTML="<ol class='example'><li>Example 1</li><li>Example 2</li><li>Example 3</li></ol>"
}

Answer 3

不要在没有 \ 的情况下使用 "" inside "" 并且您忘记在 myFunction() 之前键入 function

<div id="myDiv" class="example">Example Text.</div> <button onclick="myFunction()">Click me</button>

.

function myFunction() {

  document.getElementById('myDiv').innerHTML="<ol class='example'><li>Example 1</li><li>Example 2</li><li>Example 3</li></ol>";

}

在 javascript innerHTML 中不能有 class

Cant have class in javascript innerHTML

javascript

class

function

innerhtml