Programming Techniques & Tools: May 2021

Sunday, 23 May 2021

Find span tag inside div tag and set any text.

The given snippet will find the all span tag inside the div tag and set new text.

<div id='div1' class="c1"> <span>First Div</span> </div>

<div id='div2' class="c2"> <span>Second Div</span> </div>

<button id='action'>Click to Perform Action</button>

JQuery code to find all span inside the div tag and set new text will be -

$('div').find('span').text('New text');

$('div').children('span').text('New text');

If we want to change only in a specific div the mention div id or class like this

$('#div1').find('span').text('New text');// using id

$('.c1').find('span').text('New text'); // using class

Complete example -

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h3>

Click to change

</h3>

<div id='div1' class="c1"> <span>First Div span text</span> </div>

<div id='div2' class="c2"> <span>Second Div span text</span> </div>

<button id='action'>Click to Perform Action</button>

<script>

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

$('div').find('span').text('New text'); // change all div

// $('#div1').find('span').text('New text'); //only change div1 using id

// $('.c2').find('span').text('New text');only change div2 using class

// or

// $('div').children('span').text('New text');

});

</script>

</body>

</html>

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>

Thursday, 20 May 2021

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>

Adding textarea text to any div using Jquery.

In JQuery, it is very simple to add textarea text to any div on button click. See below how it is possible:

$("#div").html( $("#txtarea").val() ); //to add text of text area to div

This will add the textarea text to div element.

The complete example is given below-

<!DOCTYPE html>

<html>

<body>

<center>

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

<br>

<button id="action">Add text to div</button>

<div id="div"></div>

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

<script>

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

$("#div").html( $("#txtarea").val() ); //to add text of text area to div

});

</script>

</center>

</body>

</html>

Thursday, 13 May 2021

Change image source on click on image using JQuery.

It is also very simple using .attr() method to change any image source on click.

// Change src attribute of image

$(this).attr("src", "2.jpeg");

This will change first image with 2.jpeg.

Complete example-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

$("img").click(function(){

// Change src attribute of image

$(this).attr("src", "2.jpeg");

});

</script>

</head>

<body>

<img src="1.jpg" alt="image"></img>

<p><strong>Instruction:</strong> Click on the image to change its source.</p>

</body>

</html>

Dynamically create hypertext and hyperlink using JQuery.

Creating hypertext and hyperlink is a very easy task in JQuery. Using .append() function, we can create hypertext and using .attr(), we can create hyperlink. See how.

$("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

The above function will append/create a hypertext to anchor the link.

$("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

The above .attr() funntion will create link/hyperlink of anchor tag.

Complete example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#btn1").click(function(){

$("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

$("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

});

</script>

</head>

<body>

</br>

<button id="btn1">Create Hyperlink and Hypertext</button>

</body>

</html>

Adding one/many Div text to another Div using JQuery.

If you want to any div text to another or many div's text to another div, then it is very simple using JQuery.

Just use the below JQuery code to append text to div.

$("#targetdivid").append($("#sourcedivid").html());

Complete example:-

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

$("#btn1").click(function(){ // on button click

$("#demo").append($("#one").html()); //append one div text to demo

$("#demo").append($("#two").html()); //append second div text to demo

$("#demo").append($("#three").html()); //append third div text to demo

});

</script>

</head>

<body>

<center>

<div id="one" style="border:1px solid; width:50%">This is first div tag </div>

<div id="two" style="border:1px solid; width:50%">This is second div tag </div>

<div id="three" style="border:1px solid; width:50%">This is third div tag </div>

<div id="demo" style="border:1px solid; width:20%"></div></br>

<button id="btn1">Add all div text to demo div</button>

</center>

</body>

</html>