Getting the parent div of element

Getting the parent div of element

This should be really simple but I’m having trouble with it. How do I get a parent div of a child element?
My HTML:

Testing

My JavaScript:

var pDoc = document.getElementById(“myParagraph”);
var parentDiv = ??????????

I would have thought document.parent or parent.container would work but I keep getting not defined errors. Note that the pDoc is defined, just not certain variables of it.
Any ideas?
P.S. I would prefer to avoid jQuery if possible.

Solutions/Answers:

Solution 1:

You’re looking for parentNode, which Element inherits from Node:

parentDiv = pDoc.parentNode;

Handy References:

  • DOM2 Core specification – well-supported by all major browsers
  • DOM2 HTML specification – bindings between the DOM and HTML
  • DOM3 Core specification – some updates, not all supported by all major browsers
  • HTML5 specification – which now has the DOM/HTML bindings in it

Solution 2:

If you are looking for a particular type of element that is further away than the immediate parent, you can use a function that goes up the DOM until it finds one, or doesn’t:

Related:  What does two colons inside an angular expression {{::}} mean?
// Find first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't 
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}

Solution 3:

The property pDoc.parentElement or pDoc.parentNode will get you the parent element.

Solution 4:

This might help you.

ParentID = pDoc.offsetParent;
alert(ParentID.id); 

Solution 5:

var parentDiv = pDoc.parentElement

edit: this is sometimes parentNode in some cases.

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

Solution 6:

Knowing the parent of an element is useful when you are trying to position them out the “real-flow” of elements.

Below given code will output the id of parent of element whose id is provided. Can be used for misalignment diagnosis.

<!-- Patch of code to find parent -->
<p id="demo">Click the button </p>
<button onclick="parentFinder()">Find Parent</button>
<script>
function parentFinder()
{
    var x=document.getElementById("demo"); 
    var y=document.getElementById("*id of Element you want to know parent of*");
    x.innerHTML=y.parentNode.id;
}
</script>
<!-- Patch ends -->