将 html 插入 getElementById("id").innerHTML

Question

我使用 JS 更改了我网站顶部附近的 HTML，但它不起作用我之前遇到过类似的问题，因为引号搞砸了，但我试图用那个方法修复它，但它仍然不工作。

document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";

Answer 1

document.getElementById("accTabs").innerHTML = "<a onclick=\"document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";

<div id="accTabs"></div>

请试试这个片段。出现错误是因为您错误地使用了引号。

document.getElementById("accTabs").innerHTML = "<a onclick="alert('ok')"></a>";

如果您像这样尝试代码，那么双引号内的双引号将导致问题。你需要像下面这样改变这个来避免这个问题

document.getElementById("accTbs").innerHTML = "<a onclick=\"alert('ok')\"></a>";

You could also use ES6 template literal. then you can use double quote and single quote inside string without any problem.

document.getElementById("accTabs").innerHTML = `<a onclick="alert('ok')"></a>`;

Answer 2

document.getElementById("accTabs").innerHTML = "<a onclick=\" document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";

<div id="accTabs"></div>

Answer 3

尝试使用模板字符串，如下所示

document.getElementById("accTabs").innerHTML = `<a 
onclick="document.getElementById('id01').style.display='block'" class="w3-bar- 
item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;

这行得通。详细了解 Templete 字符串 Here

Answer 4

只需将 " 正确转义为 \" 并使用 ' 包裹字符串，减少转义

document.getElementById("accTabs").innerHTML = '<a onclick="document.getElementById(\'id01\').style.display=\'block\'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>';

<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>

此外，你还可以试试ES6的反引号`，甚至可以完全避免转义。

document.getElementById("accTabs").innerHTML = `<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;

<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>

将 html 插入 getElementById("id").innerHTML

inserting html into getElementById("id").innerHTML

html

javascript

getelementbyid