What is the best JavaScript code to create an img element

Xcode which is part of the MacOS Developer Tools is a great IDE. There's also NetBeans and Eclipse that can be configured to build and compile C++ projects.

I want to create a simple bit of JS code that creates an image element in the background and doesn't display anything. The image element will call a tracking URL (such as Omniture) and needs to be simple and robust and work in IE 6 =< only. Here is the code I have:

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);

Clion from JetBrains, also is available now, and uses Cmake as project model.

Is this the simplest but most robust (error free) way to do it?

document.body.appendChild(oImg);

I cannot use a framework like jQuery. It needs to be in plain JavaScript.

338406 次浏览
小开

Are you allowed to use a framework? jQuery and Prototype make this sort of thing pretty easy. Here's a sample in Prototype:

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);
小开 
var img = new Image(1,1); // width, height values are optional params
img.src = 'http://www.testtrackinglink.com';
小开 
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
小开

Emacs! Eclipse might work too.

jQuery:

$('#container').append('<img src="/path/to/image.jpg"
width="16" height="16" alt="Test Image" title="Test Image" />');
r').append('<img src="/path/to/image.jpg" width="16" height="16" alt="Test Image" title="Test Image" />');

I've found that this works even better because you don't have to worry about HTML escaping anything (which should be done in the above code, if the values weren't hard coded). It's also easier to read (from a JS perspective):

$('#container').append($('<img>', {
src : "/path/to/image.jpg",
width : 16,
height : 16,
alt : "Test Image",
title : "Test Image"
}));
小开
最佳答案 
oImg.setAttribute('width', '1px');

I've found that this works even better because you don't have to worry about HTML escaping anything (which should be done in the above code, if the values weren't hard coded). It's also easier to read (from a JS perspective):

$('#container').append($('<img>', {
src : "/path/to/image.jpg",
width : 16,
height : 16,
alt : "Test Image",
title : "Test Image"
}));

px is for CSS only. Use either:

oImg.width = '1';

to set a width through HTML, or:

oImg.style.width = '1px';
gh eg. conditional comments

to set it through CSS.

function img_create(src, alt, title) {

Note that old versions of IE don't create a proper image with document.createElement(), and old versions of KHTML don't create a proper DOM Node with new Image(), so if you want to be fully backwards compatible use something like:

// 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;
}
var img = IEWIN ? new Image() : document.createElement('img');

Also be slightly wary of document.body.appendChild if the script may execute as the page is in the middle of loading. You can end up with the image in an unexpected place, or a weird JavaScript error on IE. If you need to be able to add it at load-time (but after the <body> element has started), you could try inserting it at the start of the body using body.insertBefore(body.firstChild).

img.src = src;

To do this invisibly but still have the image actually load in all browsers, you could insert an absolutely-positioned-off-the-page <div> as the body's first child and put any tracking/preload images you don't want to be visible in there.

小开
if ( alt != null ) img.alt = alt;

Shortest way: 

(new Image()).src = "http:/track.me/image.gif";
小开
if ( title != null ) img.title = title;

As others pointed out if you are allowed to use a framework like jQuery the best thing to do is use it, as it high likely will do it in the best possible way. If you are not allowed to use a framework then I guess manipulating the DOM is the best way to do it (and in my opinion, the right way to do it).

小开

By the way, innerHTML is not that bad

小开

It's not really an IDE per se, but I really like TextMate, and with the C++ bundle that ships with it, it can do a lot of the things you'd find in an IDE (without all the bloat!).

you could simply do:

var newImage = new Image();
newImage.src = "someImg.jpg";


if(document.images)
{
document.images.yourImageElementName.src = newImage.src;
}
e>

Simple :)

小开

Simple :)

Just to add full html JS example

<!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>
小开

This is the method I follow to create a loop of img tags or a single tag as ur wish

method1 :
let pics=document.getElementById("pics-thumbs");
let divholder=document.createDocumentFragment();
for(let i=1;i<73;i++)
{
let img=document.createElement("img");
img.class="img-responsive";
img.src=`images/fun${i}.jpg`;
divholder.appendChild(img);
}
pics.appendChild(divholder);
function createImage() { var x = document.createElement("IMG");

or 

method2:
let pics = document.getElementById("pics-thumbs"),
imgArr = [];
for (let i = 1; i < 73; i++) {


imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')
<div id="pics-thumbs"></div>

提交答案