...

View Full Version : Resolved Wraping element with DIV using DHTML



Coastal Web
05-15-2009, 10:12 PM
Hello everyone, l'm trying to figure out how to wrap an element with a div (or other element) using DHTML.

For instance lets say l have this in my HTML:

<a href="#" id="btn">test</a>

if l use the following script:

obj = document.getElementById('btn').innerHTML;
obj = '<div>' + obj + '</div>';

The result:

<a href="#" id="btn"><div>test</div></a>

However say l wanted to instead wrap btn in a DIV using DHTML:

<div><a href="#" id="btn">test</a></div>

Would anyone be able to help me out?

randomuser773
05-16-2009, 12:01 AM
Hello everyone, l'm trying to figure out how to wrap an element with a div (or other element) using DHTML.



<a href='#' id='lk1'>A LINK</a>
<div style='color:#fff;background-color:#f60' id='myDiv'></div>

<script type='text/javascript'>

function makeParentOf(elem, newParent)
{
newParent.appendChild( elem.parentNode.replaceChild( newParent, elem ) );
}

makeParentOf( document.getElementById( 'lk1' ), document.getElementById( 'myDiv' ) );

</script>

TinyScript
05-16-2009, 12:05 AM
<HTML>
<HEAD>
<TITLE></TITLE>

<script language="JavaScript">
function test(){

var Elm = document.createElement('<div>');

var obj = document.getElementById("btn");

Elm.appendChild( obj.parentNode.removeChild(obj) )

document.body.appendChild(Elm);
var grab=document.getElementsByTagName('a')[0];
grab.parentNode.style.backgroundColor='blue'
grab.style.color="white"
}


</script>


</HEAD>

<BODY onload="test()">

<a href="#" id="btn">I believe This works!!</a>
</BODY>

</HTML>



output in FF saved by selecting all, selecting view selection source


<div style="background-color: blue;"><a style="color: white;" href="#" id="btn">I believe This works!!</a></div>

Coastal Web
05-16-2009, 12:14 AM
Great, thanks gents! Works perfectly.

12 Pack Mack
05-16-2009, 12:32 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var currLink = document.getElementById('btn');
var wrapDiv = document.createElement('div');
currLink.parentNode.replaceChild(wrapDiv, currLink);
wrapDiv.appendChild(currLink);
wrapDiv.className = "wrapped";
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

.wrapped a {font-family: tahoma; font-size: 14pt; color: #ff8c00;}

</style>
</head>
<body>
<a href="#" id="btn">test</a>
</body>
</html>

TinyScript
05-16-2009, 07:26 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var currLink = document.getElementById('btn');
var wrapDiv = document.createElement('div');
currLink.parentNode.replaceChild(wrapDiv, currLink);
wrapDiv.appendChild(currLink);
wrapDiv.className = "wrapped";
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', function(){init();alert(init)}, false) : addEventListener('load', function(){init();alert(init)}, false);

</script>
<style type="text/css">

.wrapped a {font-family: tahoma; font-size: 14pt; color: #ff8c00;}

</style>
</head>
<body>
<a href="#" id="btn">test</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum