ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ DOM ﯼﺎﻫ ﻩﺮﮔ

فهرست مطالب

(HTML ﺮﺻﺎﻨﻋ) ﺎﻫ ﻩﺮﮔ ﻑﺬﺣ ﻭ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ

(ﺎﻫ ﻩﺮﮔ) HTML ﺪﯾﺪﺟ ﺮﺻﺎﻨﻋ ﺩﺎﺠﯾﺍ

.ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺍﺭ (ﺮﺼﻨﻋ ﻩﺮﮔ) ﺮﺼﻨﻋ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،HTML DOM ﻪﺑ ﺪﯾﺪﺟ ﺮﺼﻨﻋ ﮏﯾ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﺪﯾﺪﺟ <p> ﺮﺼﻨﻋ ﮏﯾ ﺪﮐ ﻦﯾﺍ

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

:ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﯽﻨﺘﻣ ﻩﺮﮔ ﮏﯾ ﺪﮐ ﻦﯾﺍ .ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﻦﺘﻣ ﻩﺮﮔ ﮏﯾ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،<p> ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ ﻦﺘﻣ ﻩﺮﮔ ﺪﯾﺎﺑ ﺲﭙﺳ

para.appendChild(node);

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﻮﺟﻮﻣ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﺪﯾﺪﺟ ﺮﺼﻨﻋ ﺪﯾﺎﺑ ﺖﯾﺎﻬﻧ ﺭﺩ

:ﺪﻨﮐ ﯽﻣ ﺍﺪﯿﭘ ﺍﺭ ﺩﻮﺟﻮﻣ ﺮﺼﻨﻋ ﮏﯾ ﺪﮐ ﻦﯾﺍ

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

:ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺩﻮﺟﻮﻣ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ ﺪﯾﺪﺟ ﺮﺼﻨﻋ ﺪﮐ ﻦﯾﺍ

element.appendChild(para);

()HTML - insertBefore ﺪﯾﺪﺟ ﺮﺻﺎﻨﻋ ﺩﺎﺠﯾﺍ

ﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ ﺪﯾﺪﺟ ﺮﺼﻨﻋ ،ﯽﻠﺒﻗ ﻝﺎﺜﻣ ﺭﺩ appendChild()

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ insertBefore() ﺵﻭﺭ ﺯﺍ ﺪﯿﻧﺍﻮﺗﯽﻣ ﺪﯿ

`ﻝﺎﺜﻣ`

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

`ﺩﻮﺟﻮﻣ HTML ﺮﺻﺎﻨﻋ ﻑﺬﺣ`

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ remove() ﺯﺍ ،HTML ﺮﺼﻨﻋ ﮏﯾ ﻑﺬﺣ ﯼﺍﺮﺑ

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

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

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

`ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ`

<p> ﻭﺩ) ﺖﺳﺍ ﺪﻧﺯﺮﻓ ﻩﺮﮔ ﻭﺩ ﺎﺑ

ﺭﺩ remove() ﺵﻭﺭ

`ﮎﺩﻮﮐ ﻩﺮﮔ ﮏﯾ ﻑﺬﺣ`

ﺪﯾﺎﺑ ،ﺪﻨﻨﮐ ﯽﻤﻧ ﯽﻧﺎﺒﯿﺘﺸﭘ 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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

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

</body>
</html>

`ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ`

<p> ﻭﺩ) ﺖﺳﺍ ﺪﻧﺯﺮﻓ ﻩﺮﮔ ﻭﺩ ﺎﺑ id="div1" ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ

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

:ﺪﯿﻨﮐ ﺍﺪﯿﭘ id="p1" ﺎﺑ ﺍﺭ <

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

:ﺪﯿﻨﮐ ﺍﺪﺟ ﻦﯾﺪﻟﺍﻭ ﺯﺍ ﺍﺭ ﮎﺩﻮﮐ

parent.removeChild(child);

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺁ ﺯﺍ ﻭ ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺪﯿﻨﮐ ﻑﺬﺣ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﺍﺭ ﯼﺪﻧﺯﺮﻓ :ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻝﻮﻤﻌﻣ ﻞﺣ ﻩﺍ

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

`HTML ﺮﺻﺎﻨﻋ ﯽﻨﯾﺰﮕﯾﺎﺟ`

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ replaceChild() ﺵﻭﺭ ﺯﺍ ،HTML DOM ﺭﺩ ﺮﺼﻨ

`ﻝﺎﺜﻣ`

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

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

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →