JavaScript HTML DOM عناصر (نویدها)

افزودن و حذف نقاط (عناصر HTML)

ایجاد یک عنصر جدید HTML (نقطة)

برای افزودن یک عنصر جدید به DOM HTML، ابتدا باید این عنصر را (نقطة) ایجاد کنید و سپس آن را به عنصر موجود اضافه کنید.

مثال

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

آزمایش کنید