• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1382
  • Last Modified:

How to put a DIV tag around another tag in Javascript

1. I need to know how to put a div around a object on the page. I have <object></object> and I want it to be <div><object></object></div> from within javascript. It should work in IE and Moz and it should only put the div around the requested element.

Here is my javascript so far:

// get element on page. this element is in body tag with other elements after it
var myEl = document.getElementById("myElementID");

// create div to surround only the above element
var myDiv = document.createElement("div");
myDiv.style.position = "absolute";
myDiv.style.zIndex = 100;
// this works for IE and Mozilla
myDiv.style.left = 10+"px";
myDiv.style.top = 10+"px";
myDiv.style.height =400+"px";
myDiv.style.width = 300+"px";
myDiv.style.overflow = "auto";

// not sure what to do here...
0
omicronpersei8
Asked:
omicronpersei8
4 Solutions
 
COBOLdinosaurCommented:
I think something like:

OBJcopy=myEl.cloneNode(true);
d=document.documentElement;
x=d.removeChild(myEl);
myDiv.appendChild(OBJcopy);

Cd&
0
 
ZvonkoSystems architectCommented:
Here an example:

<html>
<head>
<script>
function embedDiv(){
  // get element on page. this element is in body tag with other elements after it
  var myEl = document.getElementById("myElementID");
  // create div to surround only the above element
  var myDiv = document.createElement("div");
  myEl.parentNode.insertBefore(myDiv,myEl);
  myDiv.appendChild(myEl)
  alert(document.body.innerHTML)
}
</script>
</head>
<body>

<div id="myElementID">some div</div>

<p>
<a href="javascript:embedDiv()">Do it</a>
</p>
</body>
</html>

0
 
superm401Commented:
That's the precise purpose of appendChild()
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GwynforWebCommented:
<script>
function addDiv(){
   document.getElementById('theDiv1').innerHTML='<div id="theDiv2" top="30" left="50">'+document.getElementById('theDiv1').innerHTML+'</div>'
}
</script>

<div id="theDiv1">
 <p>some div content</p>
</div>

<a href="#"onclick="addDiv();alert(document.getElementById('theDiv1').innerHTML);return false">Add div</a>
0
 
omicronpersei8Author Commented:
CobolD - i see that your answer could have worked had we had the chance to discuss it.
Zvonko - your solution worked. thank you. i appreciate the full example. it helps to show a full working example. cause then i know if something goes wrong in my project it's because i didn't implement it right.
superm401 - you're answer would have lead me to the final solution.
GwynforWeb - i appreciate that you provided another solution even though Zvonko provided a working solution. i like that you expressed your idea.
0
 
ZvonkoSystems architectCommented:
Thanks for the feedback omicronpersei8 .
0
 
superm401Commented:
I appreciate your generosity.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now