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:

<div id="test">
    <p id="myParagraph">Testing</p>
</div>

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.

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

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:

// 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;
}

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

Sinan ÇALIŞKAN

This might help you.

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

var parentDiv = pDoc.parentElement

edit: this is sometimes parentNode in some cases.

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

vish0910

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 -->

来源：https://stackoverflow.com/questions/6856871/getting-the-parent-div-of-element

标签

javascript

html

getelementbyid