使用javascript在span内的html内容

Question

我有一个跨度和5种不同的html结构，基本上涉及列表和div。

我有5个按钮。单击每个按钮应该将跨度的内容更改为其中一个结构。

我知道它可以像使用

一样轻松完成

document.getElementById("a").innerHTML = "<div> A </div>";

但如果我有一个20-30行的html结构，这是最好的方法吗？还是有更好的方法吗？

Answer 1

如果您要使用一堆这样的按钮，您应该使用一个可以使用传递的数据调用的函数，以便不必重写事物的角色，而不是像

那样重写

function insertHTML(id, content) {
    document.getElementById(id).innerHTML = content;
}

然后你就可以在你的按钮项上添加一个onclick功能：

<div class="button" onclick="insertHTML('idoftarget', '<div>html</div>')"></div>

Answer 2

首先，您的示例无效。 div标签不应放在a标签或span标签内。

我会将您要注入的5个HTML示例中的每一个都放入JS中，然后在用户单击其中一个按钮时使用innerHTML将它们放入相应的容器中。