Question

我正在尝试创建一个动态网页，其中包含根据类别过滤产品的按钮，我已设法使用此代码重新填充包含文本的页面：

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "<main>Hello World</main>";
}
</script>

但是我还需要它来加载图像并将其放在标签内的左侧，我尝试使用src方法：

("image").src ="image.gif";

但我没有运气，经过一段时间的搜索，我决定在这里问一下，感谢任何可以帮助我的人。

Answer 1

你可以用原始的方式做到：

    document.getElementById("demo").innerHTML = "<main> " +
                                                " <img src='myImg.jpg' class='myClass'> " +
                                                " <span class='myClass2'>Hello World</span> "+ 
                                                "</main>";

和它一起使用的css使一切都浮动到左边

    .myClass {
        float:left;
        width:100px;
        height:100px;
    }

    .myCLass2 {
        float:left;
        width:400px;
        height:300px;
    }

希望这会有所帮助。

Answer 2

JavaScript方法就是这样......

HTML：

<button onclick='populate()'>Click Me!</button>
<div id="populateMe"></div>

JS：

function populate() {
    var div = document.getElementById("populateMe");
    var text = "..."
    var imgSrc= "..."
    div.innerHTML = "<div>" + text + "</div><img id="image" src='" + imgSrc + "' />"
}

CSS：

#image {
    float: left;
}

Answer 3

你可以使用的一件事是“setAttribute”方法，它是通用的，应该让你设置src值。

请查看我为您创建的sample：

hideImg = function (imgId){
        var img = document.getElementById(imgId);
    
    if (img){
        
        var newStyle = img.getAttribute("style").replace("display: block", "display: none");
        img.setAttribute("style", newStyle);
    }
}

showImg = function (imgId, imgSrc){
    
    var img = document.getElementById(imgId);
    
    if (img){
        
        if (imgSrc)
            img.setAttribute("src", imgSrc);
        
        var newStyle = img.getAttribute("style").replace("display: none", "display: block");
        img.setAttribute("style", newStyle);
    }
}

isVisible = function(imgId) {
    
    var itIs = true;
    var img = document.getElementById(imgId);
    
    if (img) {
        
        if (img.getAttribute("style").indexOf("display: none") >= 0)
          itIs = false;    
    }
    else {
        itIs = false;
    }
    
    return itIs;
}

toggleImg = function () {
    
    if (!isVisible("myimg"))
        showImg("myimg", "http://jsfiddle.net/img/logo.png");
    else
        hideImg("myimg");
}

<div style="background-color: rgb(70, 121, 189)">
    
    <img id="myimg" style="display: none"/>
    
    <button onclick="toggleImg()">Toggle image</button>
</div>

我希望它可以帮到你。即使你计划经常处理DOM元素，也值得花一些时间来学习jQuery。

Javascript填充页面的一部分按钮单击图像和文本

3 个答案: