DOM elements in jQuery

DOM elements in jQuery

15-Oct-2022
| |
Image Carousel

DOM Elements using jQuery

DOM stands for Document Oject Model which is used to manuplate the objects in frontend , whcih supports the functionality on the client side.

Commonly used DOM elemnts used as follow:

  • getting and replacing a value of any object using .val();
  • in a similar way for getting and replacing  text .text();
  • for adding child elements .html();
  • wrappig content with an element using .append().and .prepend()

 Using .val() method 

.val() is used for getting the value from input type="text" or changing the value of objects like as follow Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css"> -->
 
    <!-- Js -->
    <script src="https://vm-services.tech/developerCorner/js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container">
        <div class="col-md-3 mt-4">
            <input type="text" name="name" id="name" value="Developer-Corner">
        </div>
        <div class="row">
            <div class="col-md-12 mt-4">
                <button type="button" id="getval">Get Value</button>
                <button type="button" id="changeVal">Change Value to Dveloper-Studio</button>
            </div>
        </div>
    </div>
</body>
 
</html>
<!-- <script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script> -->
 
<script>
    $(document).ready(function() {
        $("#getval").click(function() {
            alert($("#name").val());
        });
        $("#changeVal").click(function() {
            $("#name").val('Developer-Studio');
        });
 
    });
</script>

Using .text() method

.text() method allow us to manuplate the innertext of the ojects , like we have <p> tag , <h> tag or any other object we can manuplate to check the inner text and replace the inner text of that element Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css"> -->
 
    <!-- Js -->
    <script src="https://vm-services.tech/developerCorner/js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container">
       
        <div class="col-md-8 mt-4">
           <h4>Hello Developer-Corner</h4>
        </div>
        <div class="row">
            <div class="col-md-12 mt-4">
                <button type="button" id="gettext">Get Text</button>
                <button type="button" id="changetext">Change Text to Dveloper-Studio</button>
            </div>
        </div>
    </div>
</body>
 
</html>
<!-- <script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script> -->
 
<script>
    $(document).ready(function() {
     
        $("#gettext").click(function() {
            alert($("h4").text());
        });
        $("#changetext").click(function() {
            $("h4").text('Developer-Studio');
        });
 
    });
</script>

 

Using .html() method

.html() method allow us to manuplate the child element like it will get all child name, tags in html for and we can replace and add new child elements  into the parent elemenr. Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css"> -->
 
    <!-- Js -->
    <script src="https://vm-services.tech/developerCorner/js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container">
       
       
 <div class="col-md-8 mt-4">
            <div id="insidehtml">
                <h4>Hello Developer-Corner</h4>
            </div>
 
        </div>
        <div class="row">
            <div class="col-md-12 mt-4">
                <button type="button" id="gethtml">Get HTML</button>
                <button type="button" id="changehtml">Change HTML to Dveloper-Studio</button>
            </div>
        </div>
    </div>
</body>
 
</html>
<!-- <script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script> -->
 
<script>
    $(document).ready(function() {
     
        $("#gethtml").click(function() {
            alert($("#insidehtml").html());
        });
        $("#changehtml").click(function() {
            $("#insidehtml").html('<h4>Hello Developer-Studio</h4>');
        });
 
    });
</script>

Apart from this some other method which is known as append() & prepend() method  this allows to append the multiple child in a single parent , like this method just append the new child below the existing child
as like below and before . Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css"> -->
 
    <!-- Js -->
    <script src="https://vm-services.tech/developerCorner/js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container">
       
       
 
        <div class="col-md-8 mt-4">
            <div id="parrent">
                <h4>Hello Developer-Corner Append and Prepend the child</h4>
            </div>
 
        </div>
        <div class="row">
            <div class="col-md-12 mt-4">
                <button type="button" id="getchild">Get the child</button>
                <button type="button" id="appendChild">Append Child</button>
                <button type="button" id="prependChild">Prepend Child</button>
            </div>
        </div>
    </div>
</body>
 
</html>
<!-- <script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script> -->
 
<script>
    $(document).ready(function() {
     
        $("#getchild").click(function() {
            alert($("#parrent").html());
        });
        $("#appendChild").click(function() {
            $("#parrent").append('<h4>Hello Developer-Studio Append</h4>');
        });
        $("#prependChild").click(function() {
            $("#parrent").prepend('<h4>Hello Developer-Studio Prepend</h4>');
        });
 
    });
</script>

 

Tags: dom elements in jquery , how to create dom elemets in jquery , add text using jquery , add value in jquery , append using jquery,jquery , advance jquery , jquery advance code,
Related Articles
Load More

Newsletter