javascript - 如何在javascript中动态添加图像

Question

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

Answer 1

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

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

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

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

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

谢谢

Answer 2

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

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

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

Answer 3

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

这是一个示例，可以让您了解它是如何工作的。您可以自己添加标志..

HTML：

<div id="myDiv">
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/2.jpg" alt="2.jpg" />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/18.jpg" alt="18.jpg" />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/6.jpg" alt="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') + '" alt="' + $(this).attr('alt') + '" 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();
        });
    });
});