javascript - 在 JS 中优雅地创建图像

标签 javascript html

我想问是否有一种更优雅的方法可以使用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>

最终我会有更多的属性,并且我想尽可能避免使用 以使其更加透明。

最佳答案

您可以使用 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);
}

关于javascript - 在 JS 中优雅地创建图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8958274/

相关文章:

javascript - 在 Javascript 多维数组中设置数据

javascript - 如何添加动态自定义ShareThis按钮?

javascript - 为什么使用 ui-router 时会出现重复的 div?

javascript - 如何为一个文本框使用两个 on blur 事件?

html - 不同的字体大小取决于字符数(响应式)

jquery - 微小的滚动条问题 : how to use border on scrollbar

html - 输入字段高于预期

javascript - 根据 map 和动态用户选择生成排除列表

javascript - jQuery |选择超链接的元素文本 | text() 或 html() 方法似乎不起作用

javascript - 为什么这么多网页的标题中包含这样一个奇怪的代码片段?