HTML DOM Element insertBefore() ਮੈਥਡ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

insertBefore() ਮੈਥਡ ਮੌਜੂਦਾ ਸਬ-ਐਲੀਮੈਂਟ ਤੋਂ ਸਬ-ਐਲੀਮੈਂਟ ਜੋੜਦਾ ਹੈ。

ਹੋਰ ਦੇਖੋ:

appendChild() ਮੈਥਡ

replaceChild() ਮੈਥਡ

removeChild() ਮੈਥਡ

remove() ਮੈਥਡ

childNodes ਪ੍ਰਤੀਭਾ

firstChild ਪ੍ਰਤੀਭਾ

lastChild ਪ੍ਰਤੀਭਾ

firstElementChild ਪ੍ਰਤੀਭਾ

lastElementChild ਪ੍ਰਤੀਭਾ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

  1. <li> ਐਲੀਮੈਂਟ ਬਣਾਓ
  2. ਟੈਕਸਟ ਨੋਡ ਬਣਾਓ
  3. ਟੈਕਸਟ ਨੂੰ <li> ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜੋ
  4. ਪਹਿਲੇ <ul> ਦੇ ਪਹਿਲੇ ਸਬ-ਐਲੀਮੈਂਟ ਤੋਂ ਪਹਿਲਾਂ <li> ਐਲੀਮੈਂਟ ਜੋੜੋ:
const newNode = document.createElement("li");
const textNode = document.createTextNode("ਪਾਣੀ");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਦੂਜੀ ਸੂਚੀ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਲਿਆ ਜਾਵੇ:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਦੂਜੀ ਸੂਚੀ ਦੇ ਅੰਤ ਵਿੱਚ ਲਿਆ ਜਾਵੇ:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਫਟਵੇਅਰ

element.insertBefore(newnode, existingnode)

ਜਾਂ

node.insertBefore(newnode, existingnode)

ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
newnode ਲਾਜ਼ਮੀ। ਜੋੜਨੇ ਵਾਲਾ ਨੋਡ (ਏਲੀਮੈਂਟ)
existingnode

ਵਾਲੀਆਂ ਸ਼ਰਤਾਂ

ਜੇਕਰ ਕੋਈ ਨਿਰਦੇਸ਼ ਨਹੀਂ ਦਿੱਤਾ ਗਿਆ ਤਾਂ insertBefore ਮੱਥੌਡ ਨਵੇਂ ਨੋਡ ਦੇ ਅੰਤ ਵਿੱਚ ਜੋੜੇ ਜਾਵੇਗਾ。

ਵਾਪਸ ਕੀਤਾ ਗਿਆ ਮੁੱਲ

ਇੰਪੀਡੈਂਸ ਵਰਣਨ
ਨੋਡ ਜੋੜੇ ਗਿਆ ਨੋਡ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

element.insertBefore() ਇਹ DOM Level 1 (1998) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ。

ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:

ਚਰਮ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ