DOM howto

[Koncept]

Hello. I was wondering how to wrap the image contained with a div
container with an anchor tag. Could somebody provide me with the
code necessary to achive this using DOM-based scripting?

[Before]
<div id="foo">
<img src="image.png" />
</div>

[After]
<div id="foo">
<a href="bar.html"><img src="image.png" /></a>
</div>
Thanks in advance.

--
Koncept <<
"The snake that cannot shed its skin perishes. So do the spirits who are
prevented from changing their opinions; they cease to be a spirit." -Nietzsche

[Evertjan.]

Koncept wrote on 01 sep 2006 in comp.lang.javascript:

Hello. I was wondering how to wrap the image contained with a div
container with an anchor tag. Could somebody provide me with the
code necessary to achive this using DOM-based scripting?

[Before]
<div id="foo">
<img src="image.png" />
</div>

[After]
<div id="foo">
<a href="bar.html"><img src="image.png" /></a>
</div>

var foo = document.getElementById('foo');
foo.innerHTML = '<a href="bar.html">' + foo.innerHTML + '</a>';

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Koncept]

[Before]

<div id="foo">
<img src="image.png" />
</div>

[After]
<div id="foo">
<a href="bar.html"><img src="image.png" /></a>
</div>

In article <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.netwrote:

var foo = document.getElementById('foo');
foo.innerHTML = '<a href="bar.html">' + foo.innerHTML + '</a>';

Thanks for the super-fast response!

I am looking for an explaination of how to do this using
document.createElement just to get an understanding of how to wrap
node(s).

I can assume this much...

var div = document.getElementById("foo");
var anchor = document.createElement("a");

anchor.setAttribute("href", [dynamically assigned] );
anchor.setAttribute("title","Click here to ...");

// now I need to wrap the anchor node that was just created around
// div#foo. How make this worky? ;)

--
Koncept <<
"The snake that cannot shed its skin perishes. So do the spirits who are
prevented from changing their opinions; they cease to be a spirit." -Nietzsche

[Evertjan.]

Koncept wrote on 01 sep 2006 in comp.lang.javascript:

>[Before]
<div id="foo">
<img src="image.png" />
</div>

[After]
<div id="foo">
<a href="bar.html"><img src="image.png" /></a>
</div>

In article <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.netwrote:

>var foo = document.getElementById('foo');
foo.innerHTML = '<a href="bar.html">' + foo.innerHTML + '</a>';

Thanks for the super-fast response!

I am looking for an explaination of how to do this using
document.createElement just to get an understanding of how to wrap
node(s).

Sorry I never use those if I can, I make too many mistakes there.

>
I can assume this much...

var div = document.getElementById("foo");

Do not name a variable with an element name, consider those words
"reserved", at least for your own sanity.

var foo = document.getElementById("foo");

The above, however, is perfectly legal,
even works in IE if you do not forget the "var"

var anchor = document.createElement("a");

anchor.setAttribute("href", [dynamically assigned] );
anchor.setAttribute("title","Click here to ...");

I think the setAttribute is not necessary anymore, just do:

anchor.href = ....;
anchor.title = 'Hi!';

// now I need to wrap the anchor node that was just created around
// div#foo. How make this worky? ;)

Eh? Perhaps with an

anchor.innerHTML = foo.innerHTML
or
anchor.appendChild(document.createTextNode(foo.inn erHTML));

Never tried that. My solution seems simpler.

Gurus whatsay?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Koncept]

In article <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.netwrote:

I think the setAttribute is not necessary anymore, just do:

anchor.href = ....;
anchor.title = 'Hi!';

// now I need to wrap the anchor node that was just created around
// div#foo. How make this worky? ;)

Eh? Perhaps with an

anchor.innerHTML = foo.innerHTML
or
anchor.appendChild(document.createTextNode(foo.inn erHTML));

Never tried that. My solution seems simpler.

Gurus whatsay?

Cheers. Will try these methods. Thanks for the help. :)

--
Koncept <<
"The snake that cannot shed its skin perishes. So do the spirits who are
prevented from changing their opinions; they cease to be a spirit." -Nietzsche

[RobG]

Koncept wrote:

>[Before]
<div id="foo">
<img src="image.png" />
</div>

[After]
<div id="foo">
<a href="bar.html"><img src="image.png" /></a>
</div>

In article <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.netwrote:

>var foo = document.getElementById('foo');
foo.innerHTML = '<a href="bar.html">' + foo.innerHTML + '</a>';

Thanks for the super-fast response!

I am looking for an explaination of how to do this using
document.createElement just to get an understanding of how to wrap
node(s).

I can assume this much...

var div = document.getElementById("foo");
var anchor = document.createElement("a");

anchor.setAttribute("href", [dynamically assigned] );
anchor.setAttribute("title","Click here to ...");

// now I need to wrap the anchor node that was just created around
// div#foo. How make this worky? ;)

Add all the children of div to anchor in order, then add the anchor to
the div:

while (div.firstChild){
anchor.appendChild(div.firstChild);
}
div.appendChild(anchor);
Untested, but should work. Depending on the content of div, you might
end up with invalid HTML - not everything that can be a child of a div
can be a child of an anchor.
--
Rob