javascript 使用innerHTML修改img src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16043755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modifying img src using innerHTML
提问by Alan Joseph Sylvestre
I'm so close to finishing my code, but I'm stuck on this one little last hurdle. I want the code to allow the user to enter a link, and then when they click the button, the page appends the actual image by modifying the img src. I also want it wo append the image by using an unordered list.
我非常接近完成我的代码，但我被困在最后一个小障碍上。我希望代码允许用户输入链接，然后当他们单击按钮时，页面通过修改 img src 附加实际图像。我还希望它使用无序列表来附加图像。
Here's what I have:
这是我所拥有的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Images Reveal</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
window.onload = alert('Welcome to my assignment 2!')
$(document).keypress(function(e) {
if (e.which == 13) {
alert('Please submit text via button');
}
});
var string = "";
function imageReveal() {
var rubberDuckie = document.getElementById("textInput");
var imageReveal = rubberDuckie.value;
if (imageReveal == "") {
alert("Please enter some text!");
} else {
var li = document.createElement("li");
rubberDuckie.innerHTML = "<img src=" + rubberDuckie + " />";
var ul = document.getElementById("listItUp");
ul.appendChild(li);
}
rubberDuckie.value = "";
}
</script>
</head>
<body style="background-color:yellow;">
<div align="center">
<header>
<h1>Alan Sylvestre</h1>
</header>
<input type="text" id="textInput" size="50" placeholder="Enter Some Text">
<input type="button" id="clicking" value="Add Image" onclick="imageReveal()">
</div>
<ul id="listItUp">
</ul>
<p id="pTags">
</p>
</div>
</body>
回答by Musa
You're trying to insert the image into an input(which you can't cause its an empty element). Just insert the image into the li.
您正在尝试将图像插入到输入中（您不能使其成为空元素）。只需将图像插入 li。
li.innerHTML = "<img src=\"" + imageReveal + "\">";
回答by Ian
You're already using jQuery, so take full advantage of its methods. Try using:
您已经在使用 jQuery，因此请充分利用其方法。尝试使用：
function imageReveal() {
var rubberDuckie = $("#textInput"); // Get textbox element
var imageReveal = rubberDuckie.val(); // Get textbox value
if (!$.trim(imageReveal)) { // If textbox is empty (after being trimmed of whitespace)
alert("Please enter some text!");
} else { // If textbox has value
var li = $("<li>"); // Create <li> element
li.append($("<img>").attr("src", rubberDuckie)); // Add <img> element with src to the <li>
$("#listItUp").append(li); // Add the new <li> to the list
}
rubberDuckie.val(""); // Set the textbox value to empty
}
Also, your version of jQuery (1.3.2) is quite outdated. There are so many bug fixes, improvements and whatnot since then, that it is quite advisable to upgrade to a newer version. The current stable version is 1.9.1.
此外，您的 jQuery (1.3.2) 版本已经过时了。从那时起，有很多错误修复、改进等等，建议升级到更新的版本。当前的稳定版本是 1.9.1。
- 1.9.1 - http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
- Latest - http://code.jquery.com/jquery-latest.js
- 1.9.1 - http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
- 最新 - http://code.jquery.com/jquery-latest.js
There are other milestone versions that would be acceptable to work with, but I like to stay with the newest version to have the "best" version out there.
还有其他可以接受的里程碑版本，但我喜欢使用最新版本以获得“最佳”版本。
回答by Menios
You actually only add a list item.
您实际上只添加了一个列表项。
You need to add the list item in addition the image. For example, and most similar to your code:
除了图像，您还需要添加列表项。例如，与您的代码最相似：
function imageReveal() {
var rubberDuckie = document.getElementById("textInput");
var imageReveal = rubberDuckie.value;
if (imageReveal == "") {
alert("Please enter some text!");
} else {
var li = document.createElement("li");
var ul = document.getElementById("listItUp");
ul.appendChild(li);
li.innerHTML = "<img src=" + imageReveal + " />";
}
rubberDuckie.value = "";
}
