دستکاری محتوا – انجمن DEV

محتوای متنی:
محتوای متنی یک عنصر را بازیابی یا تنظیم می کند، به استثنای هر تگ HTML.
const element = document.getElementById('myElement');
element.textContent="New text content";
متن درونی:
مشابه textContent است، اما استایل عنصر را در نظر می گیرد.
const element = document.getElementById('myElement');
element.innerText="Updated text";
innerHTML:
محتوای HTML (از جمله برچسب ها) یک عنصر را بازیابی یا تنظیم می کند.
const element = document.getElementById('myElement');
element.innerHTML = 'New paragraph with HTML content
';
outerHTML:
محتوای HTML یک عنصر، از جمله خود عنصر را بازیابی یا تنظیم می کند.
const element = document.getElementById('myElement');
element.outerHTML = 'Updated content
';
ارزش:
مقدار عناصر فرم مانند یا را دریافت یا تنظیم کنید.
const input = document.querySelector('input');
input.value="New input value";
setAttribute():
مقدار یک ویژگی خاص را روی یک عنصر تنظیم می کند.
const element = document.getElementById('myElement');
element.setAttribute('title', 'New tooltip text');
getAttribute():
مقدار یک ویژگی مشخص شده را بازیابی می کند.
const element = document.getElementById('myElement');
const title = element.getAttribute('title');
console.log(title);
removeAttribute():
یک ویژگی را از یک عنصر حذف می کند.
const element = document.getElementById('myElement');
element.removeAttribute('title');
appendChild():
یک عنصر فرزند جدید را به عنصر والد اضافه می کند.
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
parent.appendChild(newElement);
insertBefore():
یک گره جدید را قبل از یک گره فرزند موجود درج می کند.
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const referenceNode = document.getElementById('existingElement');
parent.insertBefore(newElement, referenceNode);
():placeChild
عنصر فرزند موجود را با عنصر جدید جایگزین می کند.
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const oldElement = document.getElementById('oldElement');
parent.replaceChild(newElement, oldElement);
cloneNode():
یک کپی از یک عنصر ایجاد می کند (می تواند یک کپی عمیق شامل گره های فرزند یا کپی کم عمق باشد).
const element = document.getElementById('myElement');
const clone = element.cloneNode(true); // true for deep clone