HTML DOM Document createDocumentFragment() ਮੱਥਦਾਨ

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

createDocumentFragment() ਮੱਥਦਾਨ ਨੂੰ ਬਣਾਉਂਦਾ ਹੈ。

offscreen ਨੋਡ ਨੂੰ ਕਿਸੇ ਵੀ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਜੋੜਣ ਲਈ ਨਵੇਂ ਦਸਤਾਵੇਜ਼ ਸਪੈਕਟਰ ਬਣਾਉਣ ਦੇ ਉਪਯੋਗ ਵਿੱਚ ਹੈ。

createDocumentFragment() ਇਹ ਮੱਥਦਾਨ ਦਸਤਾਵੇਜ਼ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਕਾਉਣ, ਬਦਲਣ, ਜੋੜਣ ਜਾਂ ਹਟਾਉਣ ਅਤੇ ਫਿਰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਵਾਪਸ ਜੋੜਣ ਦੇ ਉਪਯੋਗ ਵਿੱਚ ਵੀ ਹੈ。

ਸੁਝਾਅ

ਤੁਸੀਂ ਹਮੇਸ਼ਾ ਹੀ HTML ਐਲੀਮੈਂਟ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਪਰ ਬਿਹਤਰ ਤਰੀਕਾ ਹੈ ਕਿ (offscreen) ਦਸਤਾਵੇਜ਼ ਸਪੈਕਟਰ ਬਣਾਓ ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਤਿਆਰ ਹੋਏ ਤਾਂ ਇਸ ਸਪੈਕਟਰ ਨੂੰ ਅਸਲ (ਸਰਗਰਮ) DOM ਵਿੱਚ ਜੋੜੋ। ਕਿਉਂਕਿ ਤੁਸੀਂ ਸਪੈਕਟਰ ਤਿਆਰ ਹੋਣ ਦੇ ਬਾਅਦ ਸਪੈਕਟਰ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੇਵਲ ਇੱਕ ਵਾਰੀ ਰੀ-ਅਰੇਜਮੈਂਟ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨਾ ਪਵੇਗਾ。

ਅਗਰ ਤੁਸੀਂ ਸਰਕਟ ਵਿੱਚ HTML ਐਲੀਮੈਂਟ ਕਿਸਮ ਜੋੜਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਦਸਤਾਵੇਜ਼ ਸਪੈਕਟਰ ਦਾ ਉਪਯੋਗ ਕਰਕੇ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਵਾਧਾ ਹੋ ਸਕਦਾ ਹੈ。

ਧਿਆਨ:ਦਸਤਾਵੇਜ਼ ਨੋਡ ਜੋ ਸਪੈਕਟਰ ਵਿੱਚ ਜੋੜੇ ਗਏ ਹਨ, ਮੂਲ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹਟਾਏ ਜਾਣਗੇ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਐਲੀਮੈਂਟ ਨੂੰ ਖਾਲੀ ਸੂਚੀ ਵਿੱਚ ਜੋੜੋ:

const fruits = ["Banana", "Orange", "Mango"];
// ਦਸਤਾਵੇਜ਼ ਸਪੈਕਟਰ ਬਣਾਓ:
const dFrag = document.createDocumentFragment();
// li ਐਲੀਮੈਂਟ ਨੂੰ ਸਪੈਕਟਰ ਵਿੱਚ ਜੋੜੋ:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ਸਪੈਕਟਰ ਨੂੰ ਸੂਚੀ ਵਿੱਚ ਜੋੜੋ:
document.getElementById('myList').appendChild(dFrag);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 2

ਐਲੀਮੈਂਟ ਨੂੰ ਮੌਜੂਦਾ ਸੂਚੀ ਵਿੱਚ ਜੋੜੋ:

const fruits = ["Banana", "Orange", "Mango"];
// ਦਸਤਾਵੇਜ਼ ਸਪੈਕਟਰ ਬਣਾਓ:
const dFrag = document.createDocumentFragment();
// li ਐਲੀਮੈਂਟ ਨੂੰ ਸਪੈਕਟਰ ਵਿੱਚ ਜੋੜੋ:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ਸਪੈਕਟਰ ਨੂੰ ਸੂਚੀ ਵਿੱਚ ਜੋੜੋ:
document.getElementById('myList').appendChild(dFrag);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਗਰੰਥ

document.createDocumentFragment()

ਪੈਰਾਮੀਟਰ

ਨਹੀਂ ਹੈ।

ਵਾਪਸੀ ਮੁੱਲ

ਪ੍ਰਕਾਰ ਵਰਣਨ
ਨੋਡ ਨਵੇਂ ਬਣਾਏ ਹੋਏ DocumentFragment ਨੋਡ, ਕੋਈ ਉਪ ਨੋਡ ਨਹੀਂ ਹਨ।

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

document.createComment() DOM Level 1 (1998) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵੱਲੋਂ ਸਮਰਥਿਤ ਹੈ:

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