Table of Contents
1:What is DOM ?
DOM stands for Document Oject Model which is used to manuplate the objects in frontend , whcih supports the functionality on the client side., basically DOM elements are oftenly used for manupulating user side elements or say user side objects which provide better user-experience
2:DOM with .val() method
.val() method is used for getting the value from input type="text" or changing the value of objects and we can also change the value of input type="text" by entering the value we want to show in that particular object.
code for .val() method 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/bootstrap@4.3.1/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>
3:DOM with .text() method
.text() method allow us to manuplate the innertext of the ojects , like we have <p> tag , <span>, <h> tag or any other object we can manuplate to check the inner text and replace the inner text of that element by using .text() with the ID and CLASS method with jQuery.
code for .text() method 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/bootstrap@4.3.1/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>
4:DOM with .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 elements , it is similar like we are creating some html documnets under the parent node.
code for .html() method. 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/bootstrap@4.3.1/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>
5:DOM with .append() & .prepend method()
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 and above the existing child node
code for append & prepend . 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/bootstrap@4.3.1/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>
0 Comments (Please let us know your query)