دورة jquery للمبتدئين الدرس التاسع


فهاد الدرس التاسع من دورة jquery للمبتدئين غادي نشوفوا كيفاش نزيدو des éléments ل document html باستعمال jquery مثلا نزيد h3 ولا paragraphe فغادي نشوفوا مجموعة متعددة من les méthodes jquery لي كيمكنوا من هادشي.


1- استعمال ل MÉTHODE APPEND ف JQUERY لإضافة المحتوى

فل méthode append كتمكن من إضافة élément فآخر élément لي تختار فالمثال لي عندنا :
زدنا h3 منبعد بالكود jquery زدنا فالتالي ديال h3 ل paragraphe p الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <h3>DCoding</h3>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').append('<p>learn dev easily</p>');
        });
    </script>
</body>
</html>
                            

2- استعمال ل MÉTHODE prepend ف JQUERY لإضافة المحتوى

فل méthode prepend عكس append كتمكن من إضافة élément فآول ل élément لي تختار فالمثال لي عندنا :
زدنا h3 منبعد بالكود jquery زدنا فالأول ديال h3 ل paragraphe p الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <h3>DCoding</h3>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').prepend('<p>learn dev easily</p>');
        });
    </script>
</body>
</html>
                            

3- استعمال ل MÉTHODE after ف JQUERY لإضافة المحتوى

فل méthode after كتمكن من إضافة élément منبعد ل élément لي تختار فالمثال لي عندنا :
زدنا h3 منبعد بالكود jquery زدنا منبعد h3 ل paragraphe p الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <h3>DCoding</h3>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').after('<p>learn dev easily</p>');
        });
    </script>
</body>
</html>
                            

4- استعمال ل MÉTHODE before ف JQUERY لإضافة المحتوى

فل méthode before كتمكن من إضافة élément  قبل ل élément لي تختار فالمثال لي عندنا :
زدنا h3 منبعد بالكود jquery زدنا قبل h3 ل paragraphe p الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <h3>DCoding</h3>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('h3').before('<p>learn dev easily</p>');
        });
    </script>
</body>
</html>