Use jquery to set value of div tag

Question

I have this html div tag defined:

<div style="height:100px; width:100px" class="total-title">
    first text
</div>

I have jquery code to change its value:

 $('div.total-title').html('test');

But this does not change the content of the div.

Where exactly do you execute the statement: $('div.total-title').html('test'); ?? — Niek H., Oct 15 '09 at 08:02
Theres absolutely nothing wrong with the code, if you calling the js-code after the DOM is ready. Farzad, answered it correctly. — simplyharsh, Oct 15 '09 at 09:20

score 172 · Accepted Answer · edited Jan 23 '14 at 17:28

172

if your value is a pure text (like 'test') you could use the text() method as well. like this:

$('div.total-title').text('test');

anyway, about the problem you are sharing, I think you might be calling the JavaScript code before the HTML code for the DIV is being sent to the browser. make sure you are calling the jQuery line in a <script> tag after the <div>, or in a statement like this:

$(document).ready(
    function() {
        $('div.total-title').text('test');
    }
);

this way the script executes after the HTML of the div is parsed by the browser.

edited Jan 23 '14 at 17:28

iconoclast

21,213
15
102
138

answered Oct 15 '09 at 08:04

farzad

8,775
6
32
41

3

When i put it like div.total-value it was not working. But after making it like #total-value it works – Nipuna Dec 17 '11 at 17:52
why do you need to rap it around an anonymous function? will it work without it? – Nahser Bakht Feb 25 '13 at 15:49
Because the page hasn't set up yet if it hasn't finished loading, so the div may not even exist yet if you simply put the raw code in the top level of, say, the . – DragonLord Jul 26 '13 at 17:59
either the ready or the anonymous function is required, to delay the evaluation. In this redundant case I believe the code is overkill, but it encourages cut & paste software maintainers to avoid mistakes later on. – DragonLord Jul 26 '13 at 18:13
1

yep, I think it should be `$('#div.total-title').text('test');` – hynsey Sep 25 '15 at 09:36

MaLKaV_eS · Answer 2 · 2009-10-15T08:13:00.697

11

To put text, use .text('text')

If you want to use .html(SomeValue), SomeValue should have html tags that can be inside a div it must work too.

Just check your script location, as farzad said.

Reference: .html and text

edited Oct 15 '09 at 08:13

answered Oct 15 '09 at 08:01

MaLKaV_eS

1,325
3
23
39

score 5 · Answer 3 · edited Jul 10 '12 at 03:14

5

try this function $('div.total-title').text('test');

edited Jul 10 '12 at 03:14

Community

1
1

answered Oct 15 '09 at 08:02

Alex H

733
4
8

text is obsolete now, for v1.4 or back. – rp4361 Dec 04 '15 at 09:22

score 4 · Answer 4 · answered Oct 15 '09 at 08:13

4

You have referenced the jQuery JS file haven't you? There's no reason why farzad's answer shouldn't work.

answered Oct 15 '09 at 08:13

djdd87

67,346
27
156
195

score 0 · Answer 5 · answered Jul 08 '15 at 22:18

When using the .html() method, a htmlString must be the parameter. (source) Put your string inside a HTML tag and it should work or use .text() as suggested by farzad.

Example:

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

<script type="text/javascript">
$("div.demo-container").html( "<p>All new content. <em>You bet!</em></p>" );
</script>

score 0 · Answer 6 · answered Dec 04 '15 at 09:21

use as below:

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

For this to append anything use below code for reference:

$(document).ready(function () {
        var storageVal = sessionStorage.getItem("UserName");
        alert(storageVal);
        $("#getSessionStorage").append(storageVal);
     });

This will appear as below in html (assuming storageVal="Rishabh")

<div id="getSessionStorage">Rishabh</div>

Use jquery to set value of div tag

6 Answers6

Linked