How can I replace html text dynamically?

Question

I'm adding the text "I Tot I Taw a Puddy Tat!" to the top of a page with jQuery this way in the ready function:

$("#Twitterati").html("<h3>I Tot I Taw a Puddy Tat!</h3>").append(tweetiePie);

...but I want to dynamically replace that placeholder text ("I Tot I Taw a Puddy Tat!") with the contents of this text input control:

<input type="text" name="inputQuery" id="inputQuery" placeholder="Enter something" style="display: inline-block;" />

...when the Enter key is mashed. How can I do that?

I tried this:

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#Twitterati h3").val($("#inputQuery".val()));
    }
});

...and this:

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#Twitterati h3").replaceWith($("#inputQuery".val()));
    }
});

...but neither one did anything, that I could see...

UPDATE

This is working pretty well, now; but I want the tweets to refresh when the inputQuery val replaces the text/caption/heading, too. IOW, I can change the text from, say, "jquery" to "html5" but the tweets I've got displaying remain the jquery tweets. How can I get that div to refresh?

score 2 · Accepted Answer · answered May 15 '13 at 04:48

2

Try this:

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#Twitterati h3").html($(this).val());
    }
});

Missing a closing bracket here $("#inputQuery" <----
and a extra bracket at last .val())); <----

answered May 15 '13 at 04:48

palaѕн

72,112
17
116
136

score 1 · Answer 2 · answered May 15 '13 at 04:48

1

Fix this line

                                        v
$("#Twitterati h3").html($("#inputQuery").val());

Use .html() instead of .val() for the h3

answered May 15 '13 at 04:48

Steve Robbins

13,672
12
76
124

PSR · Answer 3 · 2013-05-15T04:57:41.353

1

replace "#inputQuery".val()

with

$("#inputQuery").val()

CODE IS:

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#Twitterati h3").html($("#inputQuery").val());
    }
});

edited May 15 '13 at 04:57

answered May 15 '13 at 04:48

PSR

39,804
41
111
151

The `.val()` method is primarily used to get the values of form elements such as input, select and textarea. – Mr_Green May 15 '13 at 04:56

GautamD31 · Answer 4 · 2013-05-15T04:54:47.020

1

You are missing closing braket that leads error and replace .val() with .html because you are replacing text not value

$("#Twitterati h3").html($("#inputQuery").val());

but your original was

$("#inputQuery".val())    //MIssing HERE

You can use this also like

$("#Twitterati h3").html($(this).val());

'this' will automatically indicates the inputQuery

edited May 15 '13 at 04:54

answered May 15 '13 at 04:48

GautamD31

28,552
10
64
85

The `.val()` method is primarily used to get the values of form elements such as input, select and textarea. – Mr_Green May 15 '13 at 04:51

score 1 · Answer 5 · answered May 15 '13 at 04:49

1

You want to set the HTML of the target element. Also, you can use "this" instead of targeting the element by ID again

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13)
        $("#Twitterati h3").html($(this).val());
});

answered May 15 '13 at 04:49

Bryan

6,682
2
17
21

score 1 · Answer 6 · answered May 15 '13 at 04:51

1

Bit Safer

$("#inputQuery").keyup(function(e) {
    if(e.keyCode == 13) {
        $("#Twitterati h3").text(this.value);
    }
});

answered May 15 '13 at 04:51

If you are using `$("#Twitterati h3").html(..`, paste `` in `inputQuery` field & press enter. Repeat the same with `$("#Twitterati h3").text(..`... You will know.. – May 15 '13 at 05:46

How can I replace html text dynamically?

UPDATE

6 Answers6

Bit Safer

Linked