从输入框获取img src到一个div答案

【问题标题】：Get img src from input box into a div从输入框获取img src到一个div
【发布时间】：2012-03-26 23:46:42
【问题描述】：

我正在自学 CSS HTML，现在是 Javascript。

我的这个小项目背后的想法是让用户输入一个 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 框中获取值并添加一个新的 <div><img src="user input from txt box should go here"/></div> 每次 unser 插入和 img 的新 URL？

提前致谢。

【问题讨论】：

标签： javascript src inputbox

【解决方案1】：

我想根据你的需要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。

【讨论】：

这很好用，非常感谢，我认为对我来说最困难的部分是 creatElement 和 appendChild，我看到你在那里做了什么，我终于可以进入我的小项目的下一阶段了。

【解决方案2】：

您应该将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

【讨论】：

【解决方案3】：

这样的事情会创建一个带有图像元素的 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>

【讨论】：

【解决方案4】：

您的代码最好是这样的： html代码：

<div class="input-group col-md-5" style="margin: 0px auto;">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-image">
              Choose
      </button>
    </div>
   <input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
   <img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>

js 代码：

function getImg(){
        var url = document.getElementById('image_label').value;
        var img = document.getElementById('imgThumb');
        img.src = url;
        return true;
    }

【讨论】：