By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,567 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,567 IT Pros & Developers. It's quick & easy.

DOM howto

P: n/a

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
Sep 1 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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)
Sep 1 '06 #2

P: n/a
[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
Sep 1 '06 #3

P: n/a
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)
Sep 1 '06 #4

P: n/a
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
Sep 1 '06 #5

P: n/a
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
Sep 2 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.