Question

我想问一下，如果有更优雅的方式使用javascript而不是jQuery将图像插入html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            for(i = 0; i < 3; i++) {
                name = i + "_img";
                document.write("<img name=" + name + " />");
                img = document.images[name];
                img.src = i + ".png";
            }

        </script>
    </body>
</html>

最终我会有更多的属性，我想避免使用＆lt; img /＆gt;尽可能使其更加透明。

Answer 1

您可以使用document.createElement("tag")在JavaScript中创建元素。例如，document.createElement("image")。所以你不需要像你一样构造一个字符串。对于某些元素，例如图像，您也可以执行new Image()。请记住，当您以这种方式创建元素时，它还不是DOM的一部分。您必须使用appendChild或其他方式添加它。

另外，我不会使用document.images[]，因为我不确定这是完全跨浏览器友好的。我相信标准做法是document.getElementsByTagName("image")，它返回一个你可以迭代的数组。

var whereToAppend = document.getElementsByTagName("body")[0];

for(var i = 0; i < 3; i++) {
     var name = i + "_img";
     var img = new Image();
     img.src = i + ".png";
     whereToAppend.appendChild(img);
}

在JS中优雅地创建图像

1 个答案: