Get and Set HTML Content - text(), html(), and val() in jquery

<input type="button" id="get_text" value="Get Text">
<input type="button" id="set_text" value="Set Text">

<input type="button" id="get_html" value="Get Html Content">
<input type="button" id="set_html" value="Set Html Content">

<input type="button" id="get_val" value="Get Textbox Value">
<input type="button" id="set_val" value="Set Textbox Value">
<p>Paragraph <b>text</b></p>
<input type="text" value="Hello jquery world" id="txt_box">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#get_text').click(function(){
var txt = $('p').text();
alert(txt);
});

$('#set_text').click(function(){
var txt = $('p').text('Follow your dreams not girls or boys :p');
});

$('#get_html').click(function(){
var html_txt = $('p').html();
alert(html_txt);
});

$('#set_html').click(function(){
$('p').html('Paragraph <h1>text</h1>');
});

$('#get_val').click(function(){
var txt_val = $('#txt_box').val();
alert(txt_val);
});

$('#set_val').click(function(){
$('#txt_box').val('This is very easy, you can learn it.');
});

</script>

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *