Jquery HTML/CSS Method

hey guys,

Welcome to our article with wearewriter.com.

Today we discuss the html () ,text() and val() methods .if you want to any new updates regarding jquery so visit jquery official site

So let’s Start-

Jquery html() method

jquery html() method is used to set or return the entire content of the selected elements.

SYNTAX-

$(selector).html()  

It is used to return content.

$(selector).html(content) 

EXAMPLE

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("p").html("Hello <b>wearewriter.com</b>");  
    });  
});  
</script>  
</head> 
<body style="color: white; background-color: #a64d4d;"> 
<h1>welcome to my  article by wearewriter.com</h1>
<p>Jquery HTML() method</p>
<hr>
<button>Click here to change the content of all p elements</button>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
</body>  
</html>

OUTPUT

Jquery text() method

The jQuery text() method is used to set or return the text content of the selected elements

SYNTAX-

$(selector).text()  

To set text content:

$(selector).text(content) 

EXAMPLE

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>text demo</title>  
  <style>  
  p {  
    color: blue;  
    margin: 8px;  
  }  
  b {  
    color: red;  
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
</head>  
<body style="color: white; background-color: #a64d4d;"> 
<h1>welcome to my  article by wearewriter.com</h1>
<p>Jquery HTML() method</p>
<hr> 
<p><b>Hello! </b>wearewriter.com</p>  
<p></p>  
<script>  
var str = $( "p:first" ).text();  
$( "p:last" ).html( str );  
</script>  
</body>  
</html>

OUTPUT-

Jquery val() method

There are two usage of jQuery val() method -1.It is used to get current value of the first element in the set of matched elements.2 It is used to set the value of every matched element.

SYNTAX-

$(selector).val() 
$(selector).val(value)  
$(selector).val(function(index,currentvalue))   

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("input:text").val("wearewriter.com");  
    });  
});  
</script>  
</head>  
<body style="color: black; background-color:white;"> 
<h1>welcome to my  article by wearewriter.com</h1>
<p>Jquery VAL() method</p>
<hr>  
<p>Name: <input type="text" name="user"></p>  
<button>Set the value of the input field</button>  
</body>  
</html>  

OUTPUT

I hope This Jquery HTML/CSS Tutorials help you to solve your doughts

If you like my article so share with your friends.

Leave a Comment

Show Buttons
Hide Buttons