从输入框中获取img src转换为div

我自学自己的CSS HTML和现在的Javascript。从输入框中获取img src转换为div

这个小项目背后的想法是让用户输入一个img的URL，当用户点击一个按钮时，img应该被插入页面内的新的<div>。

我试着在stackoverflow寻找几个小时，但我真的不明白我可以如何使用其他答案来我自己的代码。大部分的CSS和HTML代码已经完成了，如果可能的话，我只需要javascript部分的帮助。

这里是我到目前为止有：（对不起，这不是很多）

的html代码：

<form name="imgForm"> 
enter URL: 
<input type="text" name="inputbox1" value="src" /> 
<input type="button" value="Get Feed" onclick="GetFeed()"/> 
</form>

Javascript代码：

<script type="text/javascript"> 

function GetFeed(imgForm){ 

var imgSrc = document.getElementById('src').value;  


} 
</script>

谁能帮助我吗？我不知道该从哪里出发..至少给我一些指示器如何从txt框中获取值并为每次img添加一个新的插入和新URL时添加一个新的 <div><img src="user input from txt box should go here"/></div>？

谢谢先进。

来源

2012-03-26 user1294097

我根据您的需要想how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div>你需要这个

HTML

<form> 
    <input type="text" id="txt"> 
    <input id="btn" type="button" value="Get Image" onclick="getImg();" /> 
</form> 
<div id="images"></div>

JS（去在你的头标签内）

function getImg(){ 
    var url=document.getElementById('txt').value; 
    var div=document.createElement('div'); 
    var img=document.createElement('img'); 
    img.src=url; 
    div.appendChild(img); 
    document.getElementById('images').appendChild(div); 
    return false; 
}

这是example。

来源

2012-03-27 00:13:09

这个伟大的工程，非常感谢，我觉得对我来说最难的部分是creatElement和使用appendChild，我看你做了什么，还有我终于可以移动到我的小项目的下一阶段。 – user1294097 2012-03-27 01:10:39

不客气:-) – 2012-03-27 01:11:23

您应该添加一个id属性您<input>：

<input type="text" name="inputbox1" id="box1" value="src" />

...那么，调整你的代码：

var imgSrc = document.getElementById('box1').value;

一旦你的源代码，你可以回到一个对象img标记，并使用文本框中的值设置其属性。该img对象的属性是由文档对象模型定义：

http://www.w3schools.com/jsref/dom_obj_image.asp

来源

2012-03-27 00:01:20 RMorrisey

类似这样的东西会创建一个div，其图像元素的src等于输入框中的文本。然后它将div附加到页面的末尾。

<html> 
    <head> 
     <script type="text/javascript"> 
      function GetFeed(form){ 
      var imgSrc = form.elements["inputbox1"].value; 
      var imgDiv = document.createElement('div'); 
      imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>" 
      document.body.appendChild(imgDiv); 
      } 
     </script> 
    </head> 
    <body> 
     <form name="imgForm"> 
      enter URL: 
      <input type="text" name="inputbox1" value="src" /> 
      <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/> 
     </form> 
    </body> 
</html>

来源

2012-03-27 00:14:08 monknomo

从输入框中获取img src转换为div

回答

相关问题