如何在javascript中动态添加图像[关闭]

Posted 2023-03-07

【中文标题】如何在javascript中动态添加图像[关闭]

【英文标题】：How to add an image dynamically in javascript [closed]

【发布时间】：2013-07-09 06:44:41

【问题描述】：

我想根据行的列中标志变量的条件添加图像。我无法使用 innerhtml 或者如果我也使用图像对象，它就无法正常工作。这些行是动态创建的，所以我很困惑如何解决它，当标志为真时，它们将显示图像，否则将不会显示图像。

【问题讨论】：

使用您提到的任何一种方法都应该很容易。显示您的代码，以便我们告诉您您做错了什么。

你能举个代码例子吗？

不看代码很难帮忙。

【参考方案1】：

您最好导入 jQuery 来解决任何跨浏览器兼容性问题，然后如果您有一个 id 为“myDiv”的 div，您只需在 html 文档的结束 body 标记之前添加以下内容。

<script>
  $('#myDiv').append('<img src="/path/myImage.png" />'); 
</script>

但理想情况下，您应该将 javascript 代码保存在一个单独的 .js 文件中。

【参考方案2】：

只需将您的图像（可能是标签）静态保留在您想要的位置

<IMG src="youImagePath" style="display:none;" id="myId"/>

然后在 Javascript 中您可以将此图像显示为

 if(flag)
    document.getElementById('myId').style.display="block";

如果您有一些复杂的要求，那么@Christopher Tokar 解决方案会更好。

谢谢

【参考方案3】：

我更喜欢使用jQuery，它可以让你更快地做很多事情。

这是一个example，它将让您了解它的工作原理。 你可以自己加flag..

HTML：

<div id="myDiv">
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/2.jpg"  />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/18.jpg"  />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/6.jpg"  />
</div>

CSS：

#myDiv  margin:10px; text-align:center; border:1px solid #ddd; 

#myDiv tr td  width:100px; height:60px; cursor:pointer; border:1px solid #ddd; 

#myDiv tr td:hover  background-color:navy; color:#fff; 

jQuery:

$(document).ready(function () 
    var myElements = "",
        myColumns = 5,
        myRows = 7,
        myImageArray = new Array(),
        randomLength = $('#myDiv img').length;
    $('#myDiv img').each(function() 
        myImageArray[$(this).index()] = '<img src="' + $(this).attr('src') + '"  style="width:100px; height:60px;" />';
    );
    $('#myDiv').empty();
    for (var j=0; j<myRows; j++) 
        myElements += '<tr>';
        for (var i=0; i<myColumns; i++)
            getRandomImage = Math.floor((Math.random()*randomLength));
            myElements += '<td>' + myImageArray[getRandomImage] + '</td>';
        
        myElements += '</tr>';
    
    $('#myDiv').append(myElements).find('img').each(function()
        $(this).hide();
        $(this).parent('td').click(function()
            $(this).children('img').toggle();
        );
    );
);