获取错误为：未捕获的TypeError：无法读取null的属性“ parentNode”

Question

I am trying to add new div adjacent to one div with the reference of ComponentID of the first div I want to add the second parallel div Like:

<div>
    <div id="userActivityStatusMenu-1110">Neighbor 1</div>
    // want new div here
</div>

Below is the script I am trying:

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function (element) {
element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function (element) {
element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'This is new element';
NewElement.id = 'NewElement';

/*  Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(getComponent(Ext.getCmp("userActivityStatusMenu-1110").itemId));

Please let me know where I am doing wrong,or what is the best way to do this

Answer 1

1. getComponent is not a global function, but a method of every ExtJS Container
2. someContainer.getComponent will not return a DOMElement, but an Ext.Component or one of its descendants

To get the DOM Node of any ExtJS Component, you can either pass the component itself or the id of the component to Ext.getDom(idOrComponent)

Example: NewElement.appendAfter(Ext.getDom("userActivityStatusMenu-1110"));

Note : It's not recommended to work with the id field at all. Instead assign a custom, unique itemId and query the Component via Ext.ComponentQuery.query('#itemid') instead.

Note2 : To be completely in line with the style of ExtJS, you should not manipulate the internal HTML structure at all. Instead either add new items to the parent element or if you really need custom HTML to be inserted, modify the html property or XTemplate of whatever Component you're trying to modify here.