Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts

    Wraping element with DIV using DHTML

    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:
    Code:
    <a href="#" id="btn">test</a>
    if l use the following script:
    Code:
    obj = document.getElementById('btn').innerHTML;
    obj = '<div>' + obj + '</div>';
    The result:
    Code:
    <a href="#" id="btn"><div>test</div></a>
    However say l wanted to instead wrap btn in a DIV using DHTML:
    Code:
    <div><a href="#" id="btn">test</a></div>
    Would anyone be able to help me out?
    Last edited by Coastal Web; 05-16-2009 at 12:15 AM.

  • #2
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by Coastal Web View Post
    Hello everyone, l'm trying to figure out how to wrap an element with a div (or other element) using DHTML.
    Code:
    <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>

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    <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>
    Last edited by TinyScript; 05-16-2009 at 12:19 AM.

  • #4
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts
    Great, thanks gents! Works perfectly.

  • #5
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    <!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>

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    <!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>
    Last edited by TinyScript; 05-16-2009 at 07:50 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •