JavaScript get parent element and write holder div for siblings

javascript dom element parent

49,184

Solution 1

Seeing as this has to be JavaScript (and not jQuery) and you can only indentify the child1 by id you could do something as crude as this:

var child1 = document.getElementById("child1"),
    parent = child1.parentNode,
    contents = parent.innerHTML ;
    parent.innerHTML = '<div id="holder">' + contents + '</div>';

Hope this helps...

Solution 2

He said no jQuery, this sounds like a homework assignment but:

var el = document.getElementById('child1');
var parent = el.parentNode;
parent.innerHTML = '<div id="holder">' + parent.innerHTML + '</div>';

Solution 3

i wrote a litte-snipped to travel through DOM to find the first matching parentNode.

Hope this helps someone, sometime.

(/¯◡ ‿ ◡)⊃━☆ﾟ. * ･｡ﾟ,

function getFirstParentMatch(element, selector) {
  if (!element) {return element};
  element.matches(selector) || (element = (element.nodeName.toLowerCase() === 'html' ? false : getFirstParentMatch(element.parentNode, selector)));
  return element;    
}

49,184

Author by

mika.el

Updated on July 05, 2022

Comments

mika.el almost 2 years
I have the following structure:
```
<div class="parent">
  <div id="child1">Content here</div>
  <div class="child2">Content here</div>
</div>
```
At onload, I want to include a "holder" div, that holds all the parent's children like so:
```
<div class="parent">
  <div id="holder">
    <div id="child1">Content here</div>
    <div class="child2">Content here</div>
  </div>
</div>
```
Knowing only the "child1" id, how can I add a holder div around itself and siblings?

Considerations
- The "child1" id is the only known identifier.
- The class "parent" and "child2" are dynamic name and will change, so can't be used as identifiers.
- needs to be vanilla JavaScript.
Thoughts?
James Allardice almost 12 years

+1 for being the only one to notice "needs to be vanilla JavaScript"! I'm sure that point wasn't there when the question was first asked though...
Mike Sav almost 12 years

But does this give you the answer. Why do you think innerHTML is crude?
mika.el almost 12 years

If the "child2" div contains 3rd party content (e.g. images and script) will using .innerHTML not force the content to reload? (I'm not in front of my desktop to test.)
Mike Sav almost 12 years

I'm not so sure about that as when testing I added an external image to the child1 div and it does load when repainting (using innerHTML). Also you didn't mention that in your original problem...
mika.el almost 12 years

Yes I agree, it was a further thought that came to mind when using innerHTML and remote content. I may need to post another Question. Thanks for your assistance.
mika.el almost 12 years

Thank you all for your assistance.
Elph almost 4 years

There is a error in your snippet, as getFirstParent should be getFirstParentMatch