Question

我已经搜索过我的这个问题并找到了一些解决方案，但我必须做的事情有些不对，因为它不起作用。我只想按一个按钮，让图像出现在某个div中。之后，我想添加更多按钮，每个按钮对应一个图像，在同一个div中更改此图像。

我的代码是：

＆＃13;

<!doctype html>
<html>
<head>
    <title>Example Domain</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    
	</style>    
</head>
<body>
	<button id="button1">Button 1</button><button id="button2">Button 2</button></br>
	<button id="button3">Button 3</button><button id="button4">Button 2</button></br>
	<p> </p>
	
	<div id="1"></div>
	<div id="2"></div>
	
	
	<script type="text/javascript">
		document.getElementById("button1").onclick=function() {
			document.getElementById("1").appendChild="<img id="image1" src="img/image1.png" />;
		}
		document.getElementById("button2").onclick=function() {
			document.getElementById("1").appendChild="<img id="image2" src="img/image2.png" />;
		}
		document.getElementById("button3").onclick=function() {
			document.getElementById("2").appendChild="<img id="image3" src="img/image3.png" />;
		}
		document.getElementById("button2").onclick=function() {
			document.getElementById("2").appendChild="<img id="image4" src="img/image4.png" />;
		}
		
	</script>	
</body>
</html>

＆＃13;

但不知怎的，我无法做到这一点。

Answer 1

您在由双引号封装的字符串中使用双引号：

"<img id="image1" src="img/image1.png" />;

这需要

"<img id=\"image1\" src=\"img/image1.png\" />";

由于JavaScript使用引号（单引号或双引号）来设置字符串，因此需要使用\来转义字符串内的引号，以避免破坏字符串。在您的原始代码中，JavaScript正在解析字符串，在id=找到字符串的结尾并中断，因为它需要行终止符;或+。

查看第一个和第二个代码块中的突出显示。它在第二个中都是红色，表示正确的转义字符串。

同时

appendChild仅适用于nodes/elements，不适用于字符串。您需要innerHTML，但每次都会覆盖div的内容。如果您不希望使用：insertAdjacentHTML()

示例：

document.getElementById("1").insertAdjacentHTML("beforeend", "<img id=\"image1\" src=\"img/image1.png\" />");

Answer 2

试试这个：

Javascript:
document.getElementById(<img id>).src = "<link to img>";
HTML:
<img id='<img id>' src='<link to img>'>

javascript单击按钮并在div中创建图像

2 个答案: