Jquery Change P Text Programmatically

Jquery change <p> text programmatically

Tags: javascript , jquery , html , jquery-mobile Answers: 1 | Viewed 153,194 times



EDIT: The solution was to add this to the profile page instead of the gender page.


$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));

});


I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.


EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.


<ul data-role="listview"   >
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li> </ul>

The gender html page is just basic stuff with two radio buttons and a save button.
Here is my javascript code(in a seperate file):


$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");
$('#pTest').html('test'); //does not work
//$('p#pTest').text('test'); //does not work
//$('#pTest').text('test'); //does not work
$.mobile.changePage("profile.html");
});
});

I have tried this with javascript: $('p#pTest').text('test');


The text does not change however. (I know that the save button works). Is this possible?


Some Answers For Jquery Change P Text Programmatically

#1. javascript - Jquery change text programmatically - Stack …

Jquery change <p> text programmatically. EDIT: The solution was to add this to the profile page instead of the gender page. I have a paragraph with som text in a listview that I want to …


$('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li>
</ul>

$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked')) localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work

//$('p#pTest').text('test');
//does not work

//$('#pTest').text('test');
//does not work
$.mobile.changePage("profile.html");
});
});
$('button').click(function(){
$('#pTest').text('test') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>

$("#gender").trigger("pageinit");

#2. [Solved] Jquery change text programmatically | 9to5Answer

Jul 08, 2022  · Jquery change <p> text programmatically; Jquery change <p> text programmatically. javascript jquery html jquery-mobile. 156,355 Try the following, note that …


$('button').click(function(){
$('#pTest').text('test') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

$('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li>
</ul>

$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked')) localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work

//$('p#pTest').text('test');
//does not work

//$('#pTest').text('test');
//does not work
$.mobile.changePage("profile.html");
});
});

#3. How to change a text with jQuery - Stack Overflow

Jun 20, 2011  · Note: If the text is Profile, then change it to New word. jquery; Share. Follow edited Dec 11, 2018 at 20:10. isherwood. 54.7k 15 15 gold badges 107 107 silver badges 147 …


<h1 id="toptitle">Profile</h1>
// Changing only when it is Profile
// to <h1 id="toptitle">New word</h1>

$("#toptitle").text("New word");

$(document).ready(function() {
$('#toptitle').text(function(i, oldText) {
return oldText === 'Profil' ? 'New word' : oldText;
});
});

var text = $('#toptitle').text();
if (text == 'Profil'){
$('#toptitle').text('New Word');
}

$('#toptitle:contains("Profil")').text("New word");

var $toptitle = $('#toptitle');
if ( $toptitle.text() == 'Profile' ) // No {} brackets necessary if it's just one line.
$toptitle.text('New Word');


$('#toptitle').html('New world');

$('#toptitle').text('New world');

$(function() {
$('#toptitle').html('New word');
});
$('#toptitle').text(altText);

#4. Jquery change text programmatically - ErrorsAndAnswers.com

Jquery change text programmatically. EDIT: The solution was to add this to the profile page instead of the gender page. $ ('#profile').live ( 'pageinit',function (event) { $ ('p#pTest').text …


$('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>
<li><a href="https://stackoverflow.com/questions/10486010/gender.html">
<img src="images/gender2.jpg"
/>
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li>
</ul>

$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked')) localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work

//$('p#pTest').text('test');
//does not work

//$('#pTest').text('test');
//does not work
$.mobile.changePage("profile.html");
});
});
$('button').click(function(){
$('#pTest').text('test') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

<form action="/saveMyParagraph.php">
<input name="pContent"
type="text"></input>
</form>

$("#gender").trigger("pageinit");

#5. Jquery change <p> text programmatically - Stack Overflow

Jquery change <p> text programmatically. EDIT: The solution was to add this to the profile page instead of the gender page. I have a paragraph with som text in a listview that I want to …


$('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li>
</ul>

$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked')) localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work

//$('p#pTest').text('test');
//does not work

//$('#pTest').text('test');
//does not work
$.mobile.changePage("profile.html");
});
});
$('button').click(function(){
$('#pTest').text('test') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>

$("#gender").trigger("pageinit");

#6. Jquery change <p> text programmatically - AngularFixing

Feb 22, 2022  · $('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender')); }); I have a paragraph with som text in a …


$('#profile').live( 'pageinit',function(event){ $('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li>
</ul>

$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked')) localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work

//$('p#pTest').text('test');
//does not work

//$('#pTest').text('test');
//does not work
$.mobile.changePage("profile.html");
});
});
$('button').click(function(){
$('#pTest').text('test') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>

#7. Change content of a p tag using jQuery - Stack Overflow

Apr 27, 2013  · Teams. Q&A for work. Connect and share knowledge within a single location that is structured and easy to search. Learn more about Teams


 $(this).find(".caption").find("#yes").live('click', function() {
$.ajax({
url: 'prob.php',
data: {action: 'yes'},
type: 'post',
success: function (response) {
$(this).find(".caption").find("#change").html("<p>Come on!</p>");
}
});
});


<li>
<a class="thumb" name="leaf" href="<?php echo $images_dir.$_SESSION['current_img'].".jpg" ?>" title="Title #0">
<img src="<?php echo $images_dir.'thumbs/'.$_SESSION['current_img'].".jpg" ?>" alt='Title #0' />
</a>
<div class="caption" id="current">
<div class="image-title">
<p id="change">Image shows a nautillus shell:

<input type="checkbox" id="yes">Yes
<input type="checkbox" id="no">No
</p>
</div>
</li>

$(document).ready(function () {
$('#yes').on('click', function () {

$('#change').text('Come on!');
});
});


$(this).find(".caption").find("#yes").on('click', function() { $.ajax({
url: 'prob.php',
data: {action: 'yes'},
type: 'post',
success:$.proxy( function (response) {
$(this).find(".caption").find("#change").text("Come on!");
},this),
error:$.proxy(function()
{//
}, this)
}) });

#8. JQuery | Change the text of a span element - GeeksforGeeks


$(selector).text()

$(selector).text(content)

$(selector).text(function(index, curContent))

  $(selector).html()  

  $(selector).html(content)  

$(selector).html(function(index, curContent))


#9. Using jQuery to Change Text of HTML Element


$("#element").text("Changed Text");

$("#element").html("Changed <em>Text</em>");

<div id="div1">
<p id="p">Hello!</p>
</div>

$("#p").text("Good bye!");

jQuery("#p").text("Good bye!");

$("#p").html("Good bye!");

<div id="div1">
<div id="click-me">Click here to update paragraph text.</div>
<p class="p">Welcome!</p>
</div>

$("#click-me").click(function(){
$(".p").text("Home");
});

<div class="html-code-output">
<div id="div1">
<div id="click-me">Click here to update paragraph text.</div>
<p class="p">Welcome!</p>
</div>
</div>
<script>
$("#click-me").click(function(){
$(".p").text("Home");
});
</script>

<div id="div">
<div id="click-me">Click here to update the text inside the span.</div>
<p>We are going to add html to this <span id="span-with-text">span with content</span>.</p>
</div>

$("#click-me").click(function(){
$("span-with-text").html("span with <strong>content</strong>");
});

<div class="html-code-output">
<div id="div">
<div id="click-me">Click here to update the text inside the span.</div>
<p>We are going to add html to this <span id="span-with-text">span with content</span>.</p>
</div>
</div>
<script>
$("#click-me").click(function(){
$("span-with-text").html("span with <strong>content</strong>");
});
</script>

#10. .text() | jQuery API Documentation


<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>

<li>list item 1</li>

<li>list <strong>item</strong> 2</li>
</ul>
</div>

<!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-3.5.0.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p" ).first().text();
$( "p" ).last().html( str );
</script>
</body>
</html>

<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>

<li>list item 1</li>

<li>list <strong>item</strong> 2</li>
</ul>
</div>

<div class="demo-container">
&lt;p&gt;This is a test.&lt;/p&gt;
</div>

<p>This is a test</p>

$( "ul li" ).text(function( index ) {
return "item number " + ( index + 1 );
});

<ul>
<li>item number 1</li>
<li>item number 2</li>
<li>item number 3</li>
</ul>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {

color: blue;

margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Test Paragraph.</p>
<script>
$( "p" ).text( "<b>Some</b>
new text."
);
</script>
</body>
</html>

#11. How to update a value of p (Paragraph tag) using jquery

Apr 28, 2014  · My code for changing and getting value using jquery is as follows. Please give some solutions thanks... <script type="text/javascript"> (document).ready (function () { $ …


<script type="text/javascript">
(document).ready(function(){
$('.dropdown-menu li a').click(function(){
alert($(this).text());
});
});
</script>
<p id="qtitle" style="padding-left:15px;"><strong>text to change</strong></p>

$(function(){
$('.dropdown-menu li a').click(function(){
$("#qtitle strong").html($(this).text());
});
});

<p id="qtitle" style="padding-left:15px;"><strong>text to change</strong></p>
<div id="myList" class="dropdown-menu">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</div>

 $('.dropdown-menu li a').click(function(){
$('#qtitle strong').text($(this).text());
});

  document.ready(function(){
$('.dropdown-menu li a').click(function(){
$("#qtitle strong").html($("#YourNewText").val());
});
});

<select class="target">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<p id="qtitle" style="padding-left:15px;"><strong>Text to change</strong></p>

$( ".target" ).change(function() {
$("#qtitle strong").html($(".target option:selected").text());
});

#12. How to change text inside an element using jQuery?


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
$('#demo').text('The replaced text.');
});
</script>
</head>
<body>
<div id="demo">
 
 <p>The initial text</p>
</div>
</body>
</html>

#13. Jquery change text programmatically - coded3.com

I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save. EDIT: This is my listview in profile.html. When you click on the item …


$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));

<ul data-role="listview"
>

<li><a href="https://www.faqcode4u.com/faq/44/gender.html">

<img src="https://www.faqcode4u.com/faq/44/images/gender2.jpg" />

<h3>Gender</h3>

<p id="pTest">Male</p>

</a></li>
</ul>

$('#gender').live('pageinit', function(event) {

var gender = localStorage.getItem('gender');

var boolMale = true;

if (gender == "female") boolMale = false;

$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");

$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");

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

if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");

else localStorage.setItem('gender', "female");

$('#pTest').html('test');
//does not work


//$('p#pTest').text('test');
//does not work


//$('#pTest').text('test');
//does not work

$.mobile.changePage("profile.html");

});
});

<p id="pTest">Male</p>
<button>change</button>
<script>
$('button').click(function(){

$('#pTest').text('test')
})
</script>

Please leave your answer here: