javascript - 使用 javascript onclick 函数替换 div 内容不起作用

Question

尝试使用 javascript onclick 函数替换 div 内容。

function x() {
            document.getElementById("carousel").
				innerHTML = "<figure><img src=\"src/theme-captures/ando-ios-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/unpivot-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/acn-n-theme-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/cirtangle-shadow-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/white-drawn-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/stock-qetto.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/craven.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/muze-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/windows-8-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/green-lanting-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/desa-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/dark-moon-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
        }

<button onclick="x()">click</button>

这不起作用，当使用内部 html 作为 innerHTML = "replace the div" 时它起作用。但是为什么它在这种情况下不起作用以及如何解决。谁能帮帮我!

Answer 1

看来确实有效。我尝试运行它，它似乎有效。

在这里试试:

function x() {
    document.getElementById("carousel").innerHTML = "<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
}

<button onclick="x()">click</button>
<div id="carousel"></div>