‎‎تغييردادن اچ تي ام الJavaScipt HTML DOM-‎ Changing HTML -‎

Previous >    <Next  

‎HTML DOM‎اجازه ميدهد كه جاوااسكريپت محتوي عناصر HTML را تغيير دهد .

‎‎تغييرمحتوي اچ تي ام الChanging HTML Content -‎

‎‎ساده ترين روش براي تغيير محتوي عناصرHTML استفاده از ويژگي‎innerHTML‎ است .

‎‎فرم كلي تغيير محتوي عنصري ازHTML مطابق زيراست :

‎document.getElementById(id).innerHTML =new HTML

‎‎مثال ـ محتوي عنصر‎<p id=‎"p1‎">‎ را تغيير ميدهد .

‎ 
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script >

</body>
</html>

--(go to editor for change code and run)

‎‎تشــريح مثال:

‎‎مثال ـ تغيير محتوي عنصر‎<h1>‎

‎ 
<!DOCTYPE html>
<html>
<body>

<h1id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script >

</body>
</html>

--(go to editor for change code and run)

‎‎تشــريح مثال:

‎‎تغيير مقدار يك ويژگيChanging the Value of an Attribute -‎

‎‎‎تغيير دادن يك ويژگي عنصرHTML مطابق فرمت كلي زيراست :

‎document.getElementById(id).attribute= new value

‎‎مثال ـ اين مثال ويژگي‎src‎ عنصر ‎<img>‎ را تغيير ميدهد .

‎ 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script >

<p The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

--(go to editor for change code and run)

‎‎تشــريح مثال:

‎‎محتوي پوياي اچ تي ام الDynamic HTML content -‎

‎‎جاوااسكريپت ميتواند متني پويا ايجاد نمايد، مثل تاريخ وزمان

‎‎مثال ـ نمايش تاريخ وزمان هنگام بارگذاري

‎ 
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script >

</body>
</html>

--(go to editor for change code and run)

‎‎متد نوشتن در سندdocument.write( ) -‎

‎‎جاوااسكريپت بامتد‎document.write( )‎ ميتواند در دنباله خروجي صفحه بنويسد .

‎‎مثال ـ. نوشتن در صفحه با جاوااسكريپت

‎ 
<!DOCTYPE html>
<html>
<body>

<p Bla bla bla</p>

<script>
document.write(Date());
</script >

<p Bla bla bla</p>

</body>
</html>

--(go to editor for change code and run)

‎

‎هرگز بعداز بارگذاري صفحه از‎‎document.write( )‎‎ ،استفاده نكنيد ‎در صفحه بازنويسي ميكند.

Previous >    <Next