جسٹاگرافیک ایچ تی ایم ڈی او ایم عنصر (نوڈ)

نقشوں (اچ آئی ایم عنصر) اضافہ اور حذف کرنا

نئی اچ آئی ایم عنصر (نقش) بنانا

کسی کا ڈاکیل اچ آئی ایم ڈوم میں نئی عنصر کا اضافہ کرنا چاہتا ہے تو ابتدا میں اس عنصر کو بنانا چاہئے (عنصر نقش)، بعد میں اس کو موجود عنصر میں ضم کیا جانا چاہئے。

مثال

<div id="div1">
<p id="p1">این پاراگراف است。</p>
<p id="p2">این پاراگراف دیگر است。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("این متن جدید است.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

نفس خود سے کوشاں

مثال توضيحي

كد زير يك نود جديد ايجاد مي‌كند: <p> عنصر:

var para = document.createElement("p");

براي <p> اگر بخواهيد متني را به عنصر اضافه كنيد، ابتدا بايد يك نود متني ايجاد كنيد. كد زير يك نود متني ايجاد مي‌كند:

var node = document.createTextNode("این یک پاراگراف جدید است.");

سپس شما بايد به <p> نود متني را به عنصر اضافه كنيد:

para.appendChild(node);

در نهايت شما بايد يك عنصر جديد به آن عنصر موجود اضافه كنيد.

كدوم يك عنصر موجود را جستجو مي‌كند:

var element = document.getElementById("div1");

كدوم به اين عنصر موجود اضافه مي‌كنه:

element.appendChild(para);

ساخت عنصر جديد HTML - insertBefore()

در مثال قبلي appendChild() كار كنيد، يك عنصر جديد به عنوان آخرين فرزند پدر اضافه كنيد.

علاوه بر اين شما مي‌توانيد از insertBefore() طریق

مثال

<div id="div1">
<p id="p1">این پاراگراف است。</p>
<p id="p2">این پاراگراف دیگر است。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("این متن جدید است.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

نفس خود سے کوشاں

حذف عنصر HTML موجود

براي حذف عنصر HTML، از remove() طریق

مثال

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

نفس خود سے کوشاں

مثال توضيحي

اين مستند HTML يك عنصر دارد كه دو نود پائين ترين دارد (دو <p> عنصر) كي <div> عنصر:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

پيدا كردن عنصر كه ميخواهيد حذف كنيد:

const elmnt = document.getElementById("p1");

سپس براي آن عنصر remove() طریق

elmnt.remove();

توجه داشته باشيد:كه روش remove() در مرورگرهاي قدیمی كار نميكنه، لطفاً به مثال زير مراجعه كنيد تا بفهميد چگونه با استفاده از removeChild()نكرد.

حذف نود پائين ترين

براي كسي كه از remove() براي كسي كه مرورگر شما از آن پشتيباني نميكنه، شما بايد نود پائين ترين را پيدا كنيد تا بتوانيد يك عنصر را حذف كنيد:

مثال

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

نفس خود سے کوشاں

مثال توضيحي

اين مستند HTML يك عنصر دارد كه دو نود پائين ترين دارد (دو <p> عنصر) كي <div> عنصر:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

پيدا كردن id="div1" عنصر:

const parent = document.getElementById("div1");

پيدا كردن id="p1" كه <p> عنصر:

const child = document.getElementById("p1");

از پائين ترين عنصر حذف كنيد:

parent.removeChild(child);

اين يك راه حل معمولي است: پائين ترين نود كه ميخواهيد حذف كنيد را پيدا كنيد و از parentNode پروپرتي پائين ترين نود پيدا كرده:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

HTML عنصر تبدیل

اگر آپ اپنے عناصر کو تبدیل کرنا چاہتے ہیں تو replaceChild() طریق

مثال

<div id="div1">
<p id="p1">این پاراگراف است。</p>
<p id="p2">این پاراگراف دیگر است。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("این متن جدید است.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

نفس خود سے کوشاں