jQuery .text() gets and sets text value
Syntax for .text() (getter)
.text()
It returns a string containing the combined text contents of the matched elements.
The following .text() method combines
the text of all the elements in a selected set.
<!DOCTYPE html>
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script type="text/javascript">
$(function(){<!--from ww w. ja v a 2 s .co m-->
var content = $("p").text();
document.writeln(content);
});
</script>
</head>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>
Syntax for .text() (setter)
.text() (setter)
sets the content of each element in the set of matched elements to the specified text.
It has two forms.
.text(textString)
textString: A string of text to set as the content of each matched element.text(function)
function: A function returning the text to set as the content
Its return value is the jQuery object, for chaining purposes.
The following code use .text() to update html.
<!DOCTYPE html>
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script>
$(function(){<!--from w w w . j a v a 2 s . c o m-->
$("p").text("updated value.");
});
</script>
</head>
<body>
<p>Blah</p>
</body>
</html>
Assign value to div element
The following code assigns text value to DIV element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w . j a v a 2 s. co m-->
var input = $("form input:text");
$("div").text("For this type jQuery found " + input.length + ".");
});
</script>
</head>
<body>
<form>
<input type="text" />
</form>
<div></div>
</body>
</html>
Change text to uppercase
The following code changes text from list to uppercase.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j a v a2 s . com-->
var mappedItems = $("li").map(function (index) {
var data = $("<li>").text($(this).text()).get(0);
$(data).text($(data).text().toUpperCase());
return data;
});
$("#results").append(mappedItems);
});
</script>
</head>
<body>
<body>
<ul>
<li>java2s.com</li>
<li>java2s.com</li>
<li>java2s.com</li>
</ul>
<ul id="results">
</ul>
</body>
</html>
Set the text for first span
The following replaces span text value.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w. ja v a 2s.c o m-->
$("#container").click(function (e) {
var $ch = $(e.target).children();
$("#results span:first").text($ch.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
</body>
</html>
Set HTML tag as text
The following code uses HTML as text.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . ja va 2 s .c om-->
$("p").text("<b>bold</b>bold.");
});
</script>
</head>
<body>
<body>
<p>java 2s.com</p>
<DIV></DIV>
</body>
</html>
Get text and attribute
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w. jav a2 s .c o m-->
$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
});
</script>
</head>
<body>
Click to see.
<div>div</div>
<div id="hey">div</div>
</body>
</html>
.text() returning as input for .html()
The following code uses .text()
returning as input for .html().
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww. j av a2 s .c om-->
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello first</p>
<p class="">Hello</p>
</body>
</html>