سبد (0)

تبلیغات

ایجاد کردن یک عنصر در JavaScript

اضافه و حذف کردن نودها (عناصر HTML)


ایجاد کردن یک عنصر جدید

Wiki

برای اضافه کردن یک عنصر جدید در مدل DOM، ابتدا باید عنصر را ایجاد کنید و سپس آنرا به یک عنصر موجود، اضافه نمایید.

 مثال (ایجاد کردن یک عنصر در JavaScript)

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

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

var element=document.getElementById("div1");
element.appendChild(para);
</script>
خودتان امتحان کنید »

توضیح مثال

کد زیر، یک عنصر جدید <p> ایجاد می کند:

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

برای اضافه کردن متن به عنصر <p>، ابتدا باید یک نود متنی ایجاد نمایید. کد زیر، این کار را انجام می دهد:

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

سپس باید نود متنی را به عنصر <P> اضافه نمایید:

para.appendChild(node);

در آخر باید، عنصر جدید را به یک عنصر موجود اضافه نمایید.

کد زیر، یک عنصر موجود در صفحه را پیدا می کند:

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

کد زیر، عنصر جدید را به عنصر موجود، اضافه می کند:

element.appendChild(para);

حذف کردن یک عنصر موجود

Wiki

برای حذف کردن یک عنصر HTML، ابتدا باید والد (parent) آنرا مشخص نمایید:

مثال (ایجاد کردن یک عنصر در JavaScript)

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
خودتان امتحان کنید »

 توضیح مثال:

کد HTML زیر، شامل یک عنصر <div> همراه با دو فرزند (child) است (دو عنصر <p>):

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

ابتدا عنصر با شناسه "div1" را به عنوان والد، شناسایی می کنیم: (متغیر یا شیء parent)

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

سپس عنصر با شناسه "p1" را به عنوان فرزند، شناسایی می کنیم: (متغیر یا شیء child)

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

در آخر، از شی parent به عنوان والد، شی child به عنوان فرزند، حذف می شود:

parent.removeChild(child);

توجه: برای حذف کردن یک عنصر در مدل DOM، باید حتماً والد آنرا مشخص نمایید.

راه حل معمول برای مشخص کردن والد، استفاده از خصوصیت parentNode است:

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

دیدگاه‌ها  

+2 # amir mohammad 1396-04-10 12:28
ببخشید که این قدر سوال میپرسم میخوام بدونم مثلا خرید کالا چطوری کار میکنه یعنی چطوری وبا استفاده از چه دستوری در چه زبانی وقتی رو یه عکس کلیک کنیم تو یه صفحه دیگه میاد بعد میتونیم بیشتر از یک کالا باشه
میتونید کد های مربوط به سبد کالاتونو برام بفرستید خیلی دنبالشم اگه میشه بزارید
مرسی از سایت خوبتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-04-11 08:21
سلام، اگر قصد پیاده سازی یک فروشگاه را دارید، پیشنهاد می کنم حتما از سیستم هایی مثل جوملا استفاده کنید. در جوملا، افزونه ای بنام فروشگاه ساز JoomShopping وجود داره که کاملا رایگان هست. در فروشگاه بیاموز از افزونه مذکور استفاده شده است.
همچنین اگر به فیلم آموزش افزونه Joomshopping نیاز دارید به لینک زیر مراجعه فرمایید:
http://beyamooz.com/product/joomshopping/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87-%D8%AF%D8%B1-%D8%AC%D9%88%D9%85%D9%84%D8%A7
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amir mohammad 1396-04-02 19:06
سلام مرسی از این سایت خوبتون
من میخوام یه کدی بنویسم که وقتی رو یه لینک کلیک کردن تو یه تگ p عددی که اونجا هست با 2000 جمع بشه و نشون داده بشه
هر کاری کردم نشد
میشه این کدو بزارید
خیلی ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-04-04 08:25
سلام و عرض ادب
<!DOCTYPE html>
<html>
<body>

<p id="beyamooz" onclick="increment()">0</p>
<script>
function increment() {
var beyamooz = document.getEle mentById('beyam ooz');
var number = parseInt(beyamo oz.innerHTML,10 );
number=number+2 000;
beyamooz.innerH TML = number;
}
</script>

</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amir mohammad 1396-04-04 19:27
سلام ببخشید فکر نمیکنید کدی که گذاشتید اشتباهه آخه تگ p قابلیت کلیک کردن نداره بعد اونی که من گفتم وقتیه که رو لینک کلیک میکنن
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1396-04-08 08:31
سلام، توجه داشته باشید که ویژگی onclick را می توانید برای تمام عناصر HTML استفاده نمایید.
در کد زیر زمانی که روی لینک Beyamooz.com کلیک می کنید، 2000 واحد به محتوای P اضافه می شود.

<!DOCTYPE html>
<html>
<body>

<p id="beyamooz">0</p>
<a onclick="increm ent()" href="#" >Beyamooz.com</a>
<script>
function increment() {
var beyamooz = document.getEle mentById('beyam ooz');
var number = parseInt(beyamo oz.innerHTML,10 );
number=number+2 000;
beyamooz.innerH TML = number;
}
</script>

</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # salar5075 1396-03-07 22:03
سلام.
من درست این بخش رو متوجه نشدم. اگه امکانش هست بگید که این کار ها دقیقا چه کاربردی دارن؟
وقتی ما می تونیم خیلی راحت داخل تگ های html چیزی رو که دوس داریم بنویسیم، چه کاریه که با جاوا اسکریپت این کارو بکنیم؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1396-03-08 11:33
سلام.
فرض کنید می خواهیم توی سایت خودمون یه دکمه قرار بدهیم که وقتی کاربر بر روی اون کلیک کرد، یه عنصر اچ تی ام ال، ایجاد بشه. مثلا یه پاراگراف یا یک عکس یا یه جدول ایجاد بشه و یا یک عکس محو بشه یا اینکه نشون داده بشه. تمام این کارها رو باید با جاوا اسکریپت انجام بدهید. ولی خود html این قابلیت ها رو نداره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # negar 1394-08-24 08:29
خسته نباشید
برای توضیح مثال اول متووجه قسمت آخرش نشدم...ما اول اومدیم و یه عنصر ایجاد کردیم . بعدش یه متن بهش اضافه کردیم و تکست رو به عنصر اضافه کردیم...حالا اون قسمت آخرش چیه!؟...چرا دوباره باید به یه چیز دیگه هم اضافه بشه؟1
منطورم اینه که پاراگراف خودش به تنهایی یه المنته...چرا از دیو هم استفاده کردیم!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-24 10:06
با سلام و تشکر.
دقت داشته باشید هر محتوایی که درون تگی قرار میگیره، فرزند اون تگ به حساب میاد.
در مثال بالا دلیل خاصی نداره!

ولی در نظر داشته باشید بعضی مواقع نیاز هست که برای کنترل محتوا تگی والد ایجاد شود و تگهای فرزند طبق روال خاصی درون این تگ والد خودشون قرار بگیرن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-07 19:27
من واقعا این متوجه نمیشم کداش نه ها کداش که هیچ راحت آسونه ولی اصلا واقعا نمیتونم درک کنم که این
ایجاد عناصر اچ تی ام ال در جاوا اسکریپت کار واقعیش چیه و چه مزایایی واسه برنامه نویس سایت داره و گلا چه کار مثبتی انجام میده
لطفا یکم راهنمایی دقیق کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-07 21:41
در دنیای واقعی برنامه‌نویسی خیلی پیش میاد، که وقتی رویدادی در جاوااسکریپت اجرا میشه، نتیجه رو به عنوان یه خروجی در قالب تگ‌های HTML نشون میده.

یه مثالش که احتمالا باید دیده باشید، تو پر کردن فیلد ثبت‌نام هست. وقتی که این فیلدها Validate میشن، در صورت بروز خطا، کنار اون کنترل یه متن با رنگ قرمز نشون داده میشه که مثلا فیلد مذکور صحیح پر نشده. همین نمایش متن با رنگ قرمز، حاوی تگ و خصوصیات html هست که توسط جاوااسکریپت درست شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # webnoos.com 1394-02-21 18:01
خواهشا با زبانی ساده بفرمایید که این ایجاد عنصر بیشتر در کجا به درد می خوره من یه خورده گیج شدم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-21 19:15
قسمت "معرف" را در فرم استخدام در نظر بگیرید، تصور کنید کاربر قادر به تعریف کردن 1 تا 5 معرف را داشته باشد. به نظر شما اگر یک دکمه با عنوان "اضافه کردن معرف" وجود داشته باشد که کاربر را قادر سازد برای وارد کردن معرف جدید، فرم را گسترش دهد، زیبا نیست ...!
البته قسمت معرف، بصورت JavaScript ی گسترش می یابد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # raghb 1394-02-07 16:20
سلام
چرا ایجاد وحذف عناصر را نمیشه در درون function ()
انجام داد من حتی متغیر ها رو خارج از تابع تعریف کردم
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-26 22:38
سلام واقعا خسته نباشید
وقتی با java script عنصری رو اضافه کنیم وقتی صفحه reload بشه اون عنصر از بین نمیره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-27 07:51
سلام، زمان reload، عنصر اضافه شده از بین خواهد رفت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی