به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت این جلسه به مبحث اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت خواهیم پرداخت با ما همراه باشید.

اکنون که نحوه انتخاب و استایل دادن به عناصر HTML DOM را آموختید. در این جلسه ما یاد خواهیم گرفت که چگونه عناصر DOM را به صورت پویا اضافه ،ویرایش و یا حذف کنیم.

اضافه کردن المنت جدید در جاوا اسکریپت

شما میتوانید به صورت صریح با استفاده از متد ()document.createElement عنصر جدیدی را در HTML document ایجاد کنید.این متد یک عنصر جدید ایجاد می کند، اما آن را به DOM اضافه نمی کند. شما باید این کار را در یک مرحله جداگانه انجام دهید. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Insert New Element into the DOM</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
	<button type="button" onclick="insertElement()">Insert Element</button>
	
	<script>
	function insertElement() {
		// Creating a new div element 
		var newDiv = document.createElement("div");
		 
		// Creating a text node 
		var newContent = document.createTextNode("Hi, how are you doing?");
		 
		// Adding the text node to the newly created div
		newDiv.appendChild(newContent);
		 
		// Adding the newly created element and its content into the DOM 
		var currentDiv = document.getElementById("main"); 
		document.body.appendChild(newDiv, currentDiv);
	}	
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Insert New Element into the DOM</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="insertElement()">Insert Element</button>

function insertElement() {

// Creating a new div element

var newDiv = document.createElement("div");

// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");

// Adding the text node to the newly created div

newDiv.appendChild(newContent);

// Adding the newly created element and its content into the DOM

var currentDiv = document.getElementById("main");

document.body.appendChild(newDiv, currentDiv);

}

</script>

</body>

</html>

متد ()appendChild عنصر جدید را در انتهای فرزند گره والد مشخص اضافه می کند.با این حال، اگر می خواهید عنصر جدید را در ابتدای فرزند یا فرزندان گره والد اضافه کنید، می توانید از متد ()insertBefore استفاده کنید.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Insert New Element at the Beginning</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
	<button type="button" onclick="insertElement()">Insert Element</button>
	
	<script>
	function insertElement() {
		// Creating a new div element 
		var newDiv = document.createElement("div");
		 
		// Creating a text node 
		var newContent = document.createTextNode("Hi, how are you doing?");
		 
		// Adding the text node to the newly created div
		newDiv.appendChild(newContent);
		 
		// Adding the newly created element and its content into the DOM 
		var currentDiv = document.getElementById("main"); 
		document.body.insertBefore(newDiv, currentDiv);
	}	
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Insert New Element at the Beginning</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="insertElement()">Insert Element</button>

function insertElement() {

// Creating a new div element

var newDiv = document.createElement("div");

// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");

// Adding the text node to the newly created div

newDiv.appendChild(newContent);

// Adding the newly created element and its content into the DOM

var currentDiv = document.getElementById("main");

document.body.insertBefore(newDiv, currentDiv);

}

</script>

</body>

</html>

ویرایش محتوای المنت ها در جاوا اسکریپت

شما با استفاده از پراپرتی innerHTML به راحتی میتوانید محتوایات عناصر را ویرایش یا محتوای جدیدی را ست کنید.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Set Inner HTML of an Element</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
	<button type="button" onclick="getContents()">Get Contents</button>
	<button type="button" onclick="setContents()">Set Contents</button>
	
	<script>
	function getContents() {
		// Getting inner HTML conents
		var contents = document.getElementById("main").innerHTML;
		alert(contents); // Outputs inner html contents
	}
	function setContents() {
		// Setting inner HTML contents
		var mainDiv = document.getElementById("main");
		mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
	}	
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Get Set Inner HTML of an Element</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="getContents()">Get Contents</button>

<button type="button" onclick="setContents()">Set Contents</button>

function getContents() {

// Getting inner HTML conents

var contents = document.getElementById("main").innerHTML;

alert(contents); // Outputs inner html contents

}

function setContents() {

// Setting inner HTML contents

var mainDiv = document.getElementById("main");

mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";

}

</script>

</body>

</html>

همانطور که می بینید چقدر راحت می توانید عناصر جدید را با استفاده از ویژگی innerHTML در DOM وارد کنید، اما یک مشکل وجود دارد، ویژگی innerHTML تمام محتوای موجود یک عنصر را جایگزین می کند.بنابراین اگر می‌خواهید HTML را بدون جایگزین کردن محتوای موجود یک عنصر در سند وارد کنید، می‌توانید از متد ()insertAdjacentHTML استفاده کنید.

این روش دو پارامتر را می پذیرد:

محتوای HTML
موقعیتی که باید در آن درج شود.

موقعیت باید یکی از مقادیر زیر را داشته باشد:

beforebegin
afterbegin
beforeend
afterend

این روش در تمام مرورگرهای اصلی پشتیبانی می شود. مثال زیر نحوه عملکرد متدهای اعلامی را نشان میدهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Insert HTML without Replacing the Existing Content</title>
</head>
<body>
    <!-- beforebegin -->
	<div id="main">
		<!-- afterbegin -->
		<h1 id="title">Hello World!</h1>
		<!-- beforeend -->
	</div>
	<!-- afterend -->
	
	<button type="button" onclick="insertContent()">Insert Content</button>
	
	<script>
	function insertContent() {
		// Selecting target element
		var mainDiv = document.getElementById("main");
		 
		// Inserting HTML just before the element itself, as a previous sibling
		mainDiv.insertAdjacentHTML('beforebegin', '<h6>This is paragraph one.</h6>');
		 
		// Inserting HTML just inside the element, before its first child
		mainDiv.insertAdjacentHTML('afterbegin', '<h4>This is paragraph two.</h4>');
		 
		// Inserting HTML just inside the element, after its last child
		mainDiv.insertAdjacentHTML('beforeend', '<h2>This is paragraph three.</h2>');
		 
		// Inserting HTML just after the element itself, as a next sibling
		mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
	}	
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Insert HTML without Replacing the Existing Content</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

</div>

<button type="button" onclick="insertContent()">Insert Content</button>

function insertContent() {

// Selecting target element

var mainDiv = document.getElementById("main");

// Inserting HTML just before the element itself, as a previous sibling

mainDiv.insertAdjacentHTML('beforebegin', '<h6>This is paragraph one.</h6>');

// Inserting HTML just inside the element, before its first child

mainDiv.insertAdjacentHTML('afterbegin', '<h4>This is paragraph two.</h4>');

// Inserting HTML just inside the element, after its last child

mainDiv.insertAdjacentHTML('beforeend', '<h2>This is paragraph three.</h2>');

// Inserting HTML just after the element itself, as a next sibling

mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');

}

</script>

</body>

</html>

نکته:موقعیت های beforebegin و afterend فقط در صورتی کار می کنند که گره در درخت DOM باشد و یک عنصر والد داشته باشد.همچنین، موقع به کاربردن از این ویژگی جهت جلوگیری از حملات XSS مراقب باشید.

حذف عناصر از DOM در جاوا اسکریپت

برای اینکار شما می توانید از متد ()removeChild برای حذف یک گره فرزند از DOM استفاده کنید. این متد عنصر حذف شده را نیز برمی گرداند. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove an Element from the DOM</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
	<button type="button" onclick="removeElement()">Remove Element</button>
	
	<script>
	function removeElement() {
		var parentElem = document.getElementById("main");
		var childElem = document.getElementById("hint");
		parentElem.removeChild(childElem);
	}
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Remove an Element from the DOM</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="removeElement()">Remove Element</button>

function removeElement() {

var parentElem = document.getElementById("main");

var childElem = document.getElementById("hint");

parentElem.removeChild(childElem);

}

</script>

</body>

</html>

همچنین امکان حذف عنصر فرزند بدون اطلاع دقیق از عنصر والد وجود دارد.به سادگی عنصر فرزند را پیدا کنید و از ویژگی parentNodeبرای یافتن عنصر والد آن استفاده کنید.این ویژگی پدر گره مشخص شده در درخت DOM را برمی گرداند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove Child Element without Knowing its Parent</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
	<button type="button" onclick="removeElement()">Remove Element</button>
	
	<script>
	function removeElement() {
		var childElem = document.getElementById("hint");
		childElem.parentNode.removeChild(childElem);
	}
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Remove Child Element without Knowing its Parent</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="removeElement()">Remove Element</button>

function removeElement() {

var childElem = document.getElementById("hint");

childElem.parentNode.removeChild(childElem);

}

</script>

</body>

</html>

جایگزینی عناصر موجود در DOM

با استفاده از متد ()replaceChild شما همچنین می توانید یک عنصر را در HTML DOM با عنصر دیگری جایگزین کنید.

این روش دو پارامتر را می پذیرد:

عنصری که باید درج شود
عنصری که باید جایگزین شود.

و سینتکس آن به این شکل می باشد. ;parentNode.replaceChild(newChild, oldChild)

به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Replace an Element with another Element in the DOM</title>
</head>
<body>
    <div id="main">
		<h1 id="title">Hello World!</h1>
		<p id="hint">This is a simple paragraph.</p>
	</div>
	
    <button type="button" onclick="replaceParagraph()">Replace Paragraph</button>
	
	<script>
    function replaceParagraph() {
        var parentElem = document.getElementById("main");
        var oldPara = document.getElementById("hint");

        // Creating new elememt
        var newPara = document.createElement("p");
        var newContent = document.createTextNode("This is a new paragraph.");
        newPara.appendChild(newContent);

        // Replacing old paragraph with newly created paragraph
        parentElem.replaceChild(newPara, oldPara);
    }	
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Replace an Element with another Element in the DOM</title>

</head>

<body>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

<button type="button" onclick="replaceParagraph()">Replace Paragraph</button>

function replaceParagraph() {

var parentElem = document.getElementById("main");

var oldPara = document.getElementById("hint");

// Creating new elememt

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

var newContent = document.createTextNode("This is a new paragraph.");

newPara.appendChild(newContent);

// Replacing old paragraph with newly created paragraph

parentElem.replaceChild(newPara, oldPara);

}

</script>

</body>

</html>

خب دوستان گرامی به پایان جلسه اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایر مقالات:

ویژگی های set و get در جاوا اسکریپت | JavaScript DOM Get Set Attributes

سلکتورها در جاوا اسکریپت | JavaScript DOM Selectors

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

پیمایش نودها در جاوا اسکریپت نوشته قبل

Window در جاوا اسکریپت | JavaScript Window نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.