PDA

View Full Version : Hmm, get entire IMG tag HTML



martynball
Oct 16th, 2010, 12:32 AM
Okay, lets say I have this simple code here:


var container = document.getElementById(con);
var obj = container.getElementsByTagName('img');


and I want to get the full HTML image tag using the obj value, if you get what I mean. How would I do this?

So I want to get this:


<img src="images/image_209948045.jpg" />

by using this: obj[0];

Old Pedant
Oct 16th, 2010, 12:38 AM
In MSIE, it's easy: obj[0].outerHTML

But in any other browser, you would have to move up the node tree to the <img>'s parent object, get that object's innerHTML, and then try to find the *CORRECT* <img> tag in that innerHTML. Which could be a challenge if the parent node contains 73 differ <img>s. In other words, you might as well just look at the innerHTML of that container object and use string parsing techniques to find that <img> tag. Actually, if you know that it is the first <img> in the container, that would be pretty easy. Let's see...



var temp1 = container.split( /\<img\s/gi )[1];
var temp2 = temp1.split( /\>/g )[0];
var text = "<img " + temp2 + ">";

No?

Can you tell us *WHY* you need this??

You should be able to "reconstruct" the <img> by looking at all its properties. e.g., img.src, img.alt, img.width, img.style, etc., etc.

martynball
Oct 16th, 2010, 12:41 AM
I want to create a div around the selected img and resize that image, so how would I go about putting a div tag just before obj[0] and then obj[1] ect... remember there may be text between these images.

And I need that to be an array.

Old Pedant
Oct 16th, 2010, 12:44 AM
I changed my answer. Go look at it again.

But why not use DOM methods to do that???

Where do you want the </div> to be?? Do you mean you want to move *just* the <img> inside a <div>??

martynball
Oct 16th, 2010, 12:46 AM
DOM methods?

Also, please can you explain this: '/\<img\s/gi'. What do the /\ do? And the gi?

Old Pedant
Oct 16th, 2010, 01:37 AM
DOM methods. Such as
document.createElement("div");
container.insertBefore( .... )
etc.
http://www.w3schools.com/jsref/dom_obj_all.asp

/\<img\s/gi is a regular expression.
/.../ delimit the actual expression
\< means a literal < character (the \ "escapes" it so it won't have any special meaning)
\s is a whitespace character
so /\<img\s/ means "look for the string '<img '"
the /g means "all occurrences" (global)
the /i means "ignore case" (so it would also find "<IMG " or "<Img " or "<iMG ", etc.

That's all.

Logic Ali
Oct 16th, 2010, 03:13 AM
I want to create a div around the selected img and resize that image, so how would I go about putting a div tag just before obj[0] and then obj[1] ect... remember there may be text between these images.

And I need that to be an array.Use this function where:
imageParent is a reference to the containing element,
imgSrc is the src of the image to be enclosed,
divClass is the CSS class to be applied to the generated div.

function divAroundImage( imageParent, imgSrc, divClass )
{
var images = imageParent.getElementsByTagName( 'img' ),
targetImage = null,
imgDiv,
re = new RegExp( imgSrc + "$" );

for( var i = 0; images[ i ] && !targetImage; i++ )
if( re.test( images[ i ].src ) )
targetImage = images[ i ];

if( targetImage && targetImage.parentNode === imageParent )
{
( imgDiv = document.createElement( 'div' ) ).className = divClass;
imgDiv.appendChild( imageParent.replaceChild( imgDiv, targetImage ) );
}

return imgDiv;
}Now all you have to do is work out how to remove the div afterwards.