getElementById.innerHTML don'似乎不起作用

getElementById.innerHTML don't seem to work

本文关键字：不起作用 innerHTML don getElementById      更新时间：2024-04-23

所以，我刚刚开始尝试JavaScript。我一直在寻找解决问题的方法，但似乎找不到。这可能是一个简单的解释，但我相信JS的其他新手可能也有同样的问题。

我需要用JS实现HTML的原因是，我试图将数据库中的信息设置到tumbnails中。尽管我还没有将变量传递到这段代码中。

<head>
<script type="text/javascript">
    document.onload = function () {
        document.getElementById("thumbnails").innerHTML =
            '<div class="col-sm-6 col-md-4">' +
                '<div class="thumbnail">' +
                    '<img src="pictures/workshop.jpg" alt="...">' +
                    '<div class="caption">' +
                        '<h3>Thumbnail label</h3>' +
                        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' +
                        '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' +
                    '</div>' +
                '</div>' +
             '</div>';
    }
</script>
</head>
<body>
    <div class"row" id="thumbnails">
    </div>

解决方案是：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div class"row" id="thumbnails"></div>
        <script type="text/javascript">
            function var1() {
              document.getElementById("thumbnails").innerHTML =
                    '<div class="col-sm-6 col-md-4">' +
                        '<div class="thumbnail">' +
                            '<img src="pictures/workshop.jpg" alt="...">' +
                            '<div class="caption">' +
                                '<h3>Thumbnail label</h3>' +
                                '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' +
                                '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' +
                            '</div>' +
                        '</div>' +
                     '</div>';
            }
            window.onload = var1;
        </script>
    </body>
</html>

无论如何，我建议您使用jQuery(https://jquery.com)。

相关文章：