javascript - 使用javascript的跨度内的html内容

Question

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

我有 5 个按钮。单击每个按钮应将跨度的内容更改为这些结构之一。

我知道它可以像使用一样容易地完成

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

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

Answer 1

如果你要拥有一堆这样的按钮，你应该使用一个你可以用传递的数据调用的函数，这样就不必重写东西 voer 和类似的东西

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 将它们放入相应的容器中。