使用onclick事件时如何加载html内容？

Question

我正在做我的一个小型随机项目，但是遇到了问题。 我正在使用onclick按钮事件来组织具有不同主题的图片。 但是，当我尝试将代码放入.innerHTML部分时，它将破坏代码，并且将不起作用。 难道我做错了什么？ 这是我的代码

    <!DOCTYPE html>
<html>
<head>
<script>
function Function1() {
    document.getElementById("demo").innerHTML = "<img>imagelinkgoeshere</img>"
    }
</script>
</head>
<body>

<button style="width:100px;font-size:20px;font-family:Playball;color:#910000;background-color:rgba(0,0,0,0);border:solid 0px #fff" onclick="Function1()">Theme1</button>

<p id="demo">Photos appear here</p>

</body>
</html>

显然，会有更多的按钮，因此会有更多的主题，但我只是向您展示了使按钮保持整洁的基础。 难道我做错了什么？ 我是否需要其他Javascript代码或输出才能使其正常工作？ 谢谢。

Answer 1

您的图片HTML错误。 图像的语法是

<img src="imagelinkgoeshere">

因此该函数应为：

function Function1() {
    document.getElementById("demo").innerHTML = '<img src="imagelinkgoeshere">';
}

Answer 2

使用innerHTML也许更好的选择是动态创建图像HTML元素，然后将其插入div中：

function Function(1) {
    var container = document.getElementById('demo');
    var img = document.createElement('img'); // creates an <img> HTML element
    img.src = 'imageurl.png'; // Giving the image some a target to display
    demo.appendChild(img); // Add the newly created image to the container #demo

}

使用onclick事件时如何加载html内容？

问题描述

2 个解决方案

解决方案1
1 2015-08-19 18:33:58

解决方案2
0 2015-08-19 18:43:16

使用onclick事件时如何加载html内容？

问题描述

2 个解决方案

解决方案1 1 2015-08-19 18:33:58

解决方案2 0 2015-08-19 18:43:16

解决方案1
1 2015-08-19 18:33:58

解决方案2
0 2015-08-19 18:43:16