Adding(appending) span tag/element inside div tag/element and adding(wrapping) div tag/element outside the span tag/element dynamically using JQuery.

This blog will see how we can add (appending) span tag/element inside div tag/element and add (wrapping) div tag/element outside the span tag/element dynamically using JQuery.

Let see in detail-

1. Add (appending) span tag/element inside div tag/element. Using .append() function we can add something in any element/tag inside.

<div id="div" class="div" style="height:150px; width:150px; background-color:red;"></div></br>

<button id='action'>Add span inside div</button></br>

JQuery code will be -

$('#action').click(function() {     

 $('.div').append("<span style='border-color: coral;background-color:green;'>Span Added</span>");//insert inside

});

2. Add (wrapping) div tag/element outside the span tag/element. Adding something outside of any element is called wrapping. For that we use .wrap() function.

<span class="span" style="background-color:green;">Span text</span></br>

<button id='action1'>Add div outside the span</button>

JQuery code will be -

 $('#action1').click(function() {

$( ".span" ).wrap( "<div id='new' style='border: thick solid blue;' class='new'>Div Added..</div>" );//inser outside

});

Note: JQuery script will be  writen before body close(</body>) tag.

Now complete example -

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

   h3 {font-size: 30px;}

</style>

</head>

<body>

<center>

  <h3>

  Click to change 

  </h3>

  <div id="div" class="div" style="height:150px; width:150px; background-color:red;"></div></br>

<button id='action'>Add span inside div</button></br>

<span class="span" style="background-color:green;">Span text</span></br>

<button id='action1'>Add div outside the span</button>

  <script>

$('#action').click(function() {     

  $('.div').append("<span style='border-color: coral;background-color:green;'>Span Added</span>");//insert inside

});

    

$('#action1').click(function() {

$( ".span" ).wrap( "<div id='new' style='border: thick solid blue;' class='new'>Div Added..</div>" );//inser outside

});

</script>

</center>

</body>

</html>

Checking textarea empty value using JQuery.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('#action').click(function() {

    if (!$.trim($("#txtarea").val())) {

       alert("please input something");  //to check textarea is empty or not

}

});

</script>

Above JQuery code will check that textarea is empty or not it will also check white space.

Complete example is given below-

<!DOCTYPE html>

<html>

<body>

<center>

<textarea cols="50" rows="8" id="txtarea" required></textarea>

<br>

<button id="action">Click to check</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('#action').click(function() {

   if (!$.trim($("#txtarea").val())) {

       alert("please input something");  //to check textarea is empty or contains only white-space

}

});

</script>

</center>

</body>

</html>

Multi select Checkbox

We stuck at some situation where checkboxes are generated dynamically- generally when we fetch data from database- and we have to select  some row are all rows and do some operation on that.

If we don't have multi select checkbox option we will have to select one by one and if there are too many data it will be time-consuming and irritating.

To do this we require Jquery with javascript.

1. Add jquery.min.js to file-

<script src="js/jquery.min.js"></script>

2. Use javascript to file-

$(document).ready(function(){

    $('#select_all').on('click',function(){

        if(this.checked){

            $('.checkbox').each(function(){

                this.checked = true;

            });

        }else{

             $('.checkbox').each(function(){

                this.checked = false;

            });

        }

    });

    

    $('.checkbox').on('click',function(){

        if($('.checkbox:checked').length == $('.checkbox').length){

            $('#select_all').prop('checked',true);

        }else{

            $('#select_all').prop('checked',false);

        }

    });

});

3. Then create master checkbox-

<input type='checkbox' id='select_all' />

4. Now another checkboxes will be-

<input name='rid[]' type='checkbox' class='checkbox' value='<?php echo $row[0];?>' />

All done .

It looks like-