javascript - 单击时将图像插入到 div
问题描述
单击按钮并选中复选框后,我希望能够向此 div 添加图像。我已经确认复选框部分可以正常工作,但无法让照片进入 div。
这是我目前拥有的:
<button id="show_button">Show System</button>
<div class="box" id="AC1"></div>
<script>
var show_button = document.getElementById('show_button');
var show = function() {
// AC Relevant Components;
var ch_mGT = document.getElementById('mGT').checked;
// Set AC1
if (ch_mGT) {
var AC1_html = "<img src='http://localhost/....png' alt='Micro Turbine'
height='50px'>";
document.getElementById("AC1").innerHTML(AC1_html);
}
}
show_button.addEventListener("click",show);
</script>
我也已经尝试过:
var AC1_img = document.createElement("img");
AC1_img.src = 'http://localhost/....png'
document.getElementById('AC1').appendChild(AC1_img);
解决方案
您说您尝试使用 appendElement,但它似乎在下面的示例中有效。
var show_button = document.getElementById('show_button');
var show = function() {
var ch_mGT = document.getElementById('mGT').checked;
var AC1_img = document.createElement('img')
AC1_img.src="https://i.ytimg.com/vi/r4Hve6fZ7ik/maxresdefault.jpg"
AC1_img.style.height = "50px"
AC1_img.alt = 'Micro Turbine'
if (ch_mGT) {
document.getElementById("AC1").appendChild(AC1_img)
}
}
show_button.addEventListener("click",show);
<div class="box" id="AC1"></div>
<input type="checkbox" id="mGT">
<button id="show_button">Show System</button>
推荐阅读
- docker - Selenium Docker 容器中的 Google Chrome 问题
- c# - .NET 5.0 中的 viewModel 查询
- python - 阅读 [#All/#Headers/#Data/#Totals] 在 xlwings 中不起作用(不再?)
- r - 如何对R中所有具有相同开头的值求和
- flutter - 错误:必须初始化不可为空的实例字段“screenSize”
- javascript - 为什么在屏幕加载 0.5 秒时动画没有消失?
- json - REST api端点返回分页
- c++ - 将 float[] 作为 float* 参数传递的问题
- android - 使用 Appium 登录 Google 帐户
- c# - C# || 如何将字符串信息从方法传递给其他方法