什么是最好的JavaScript代码来创build一个img元素
我想创build一个简单的JS代码，在后台创build一个图像元素，并不显示任何东西。 图像元素将调用跟踪URL（如Omniture），并且需要简单而健壮，并且在IE 6 = <only中工作。 这里是我有的代码：
var oImg = document.createElement("img"); oImg.setAttribute('src', 'http://www.testtrackinglink.com'); oImg.setAttribute('alt', 'na'); oImg.setAttribute('height', '1px'); oImg.setAttribute('width', '1px'); document.body.appendChild(oImg); 这是最简单但最健壮（无错误）的方法吗？
我不能使用像jQuery这样的框架。 它需要在普通的JavaScript中。
oImg.setAttribute('width', '1px');
px仅适用于CSS。 使用任一：
oImg.width = '1';
通过HTML设置宽度，或者：
oImg.style.width = '1px';
通过CSS设置它。
请注意，IE的旧版本不会使用document.createElement()创build合适的图像，旧版本的KHTML不会使用new Image()创build适当的DOM节点，所以如果您想完全向后兼容，喜欢：
// IEWIN boolean previously sniffed through eg. conditional comments function img_create(src, alt, title) { var img = IEWIN ? new Image() : document.createElement('img'); img.src = src; if ( alt != null ) img.alt = alt; if ( title != null ) img.title = title; return img; }
对于document.body.appendChild如果脚本可能会在页面处于加载过程中时执行，那么也要稍微小心。 您可以在意想不到的地方，或在IE浏览器上的一个奇怪的JavaScript错误的图像。 如果你需要在加载时加载它（但是在<body>元素启动之后），你可以尝试使用body.insertBefore(body.firstChild)在body的开头插入它。
要做到这一点，但仍然在所有的浏览器加载图像，你可以插入一个绝对定位的页面<div>作为身体的第一个孩子，并把任何跟踪/预加载图像，你不想成为在那里可见。
var img = new Image(1,1); // width, height values are optional params img.src = 'http://www.testtrackinglink.com';
jQuery的：
$('#container').append('<img src="/path/to/image.jpg" width="16" height="16" alt="Test Image" title="Test Image" />');
我发现这样做效果更好，因为您不必担心HTML转义任何东西（如果值没有被硬编码，那么应该在上面的代码中完成）。 （从JSangular度来看）也更容易阅读：
$('#container').append($('<img>', { src : "/path/to/image.jpg", width : 16, height : 16, alt : "Test Image", title : "Test Image" }));
var img = document.createElement('img'); img.src = 'my_image.jpg'; document.getElementById('container').appendChild(img);
只是为了完整性，我会build议使用InnerHTML的方式 – 即使我不称之为最好的方法…
document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";
顺便说一句， innerHTML并不是那么糟糕
你允许使用框架吗？ jQuery和Prototype使这种事情很容易。 这里有一个原型示例：
var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' }); $(document).insert(elem);
最短path：
(new Image()).src = "http:/track.me/image.gif";
你可以简单地做：
var newImage = new Image(); newImage.src = "someImg.jpg"; if(document.images) { document.images.yourImageElementName.src = newImage.src; }
简单:)
正如其他人指出的，如果允许使用像jQuery这样的框架，最好的办法就是使用它，因为它很可能会以最好的方式来实现。 如果你不允许使用框架，那么我认为操纵DOM是最好的方法（在我看来，正确的方法）。
只要添加完整的HTML JS例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>create image demo</title> <script> function createImage() { var x = document.createElement("IMG"); x.setAttribute("src", "http://www.iseebug.com/wp-content/uploads/2016/09/c2.png"); x.setAttribute("height", "200"); x.setAttribute("width", "400"); x.setAttribute("alt", "suppp"); document.getElementById("res").appendChild(x); } </script> </head> <body> <button onclick="createImage()">ok</button> <div id="res"></div> </body> </html>
