Javascript onclick 替换整个内部 html 的 div 内容

Question

当他们点击 THEATER 时，它应该会更改为 NORMAL 并具有新功能

示例来自：

<div id="links">
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a>
<a onClick="TheaterMode()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; THEATER</a>
</div>

收件人：

<div id="links">
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a>
<a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>";
</div>

我试过了，但没用希望有人能帮忙谢谢。

<script>
document.getElementById("links").innerHTML = "<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a><a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>";
</script>

Answer 1

我稍微简化了您的示例。基本上你要么需要用单引号将你在 .innerHTML = ... 中分配的 html 括起来，要么使用 \ 来转义引号。

简化示例：

// escape quotes with backslash
function theaterMode() {
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\" style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>";
}

// or wrap HTML with single quotes
function normalSize() {
    document.getElementById("links").innerHTML = '<a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a><a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a>';
}

function refreshStream() {
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\"  style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>";
}

<div id="links">
    <a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a>
    <a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a>
</div>

有更简洁的方法来执行此操作，如果您只是更改第二个 link 的功能，那么真的没有理由继续更新第一个 link。

希望对您有所帮助。

Javascript onclick 替换整个内部 html 的 div 内容

Javascript onclick replace entire inner html of div content

javascript

replace

onclick

innerhtml