如何动态替换html文本？答案

【问题标题】：How can I replace html text dynamically?如何动态替换html文本？
【发布时间】：2013-05-09 13:16:18
【问题描述】：

我正在添加文字“I Tot I Taw a Puddy Tat！”以这种方式在 ready 函数中使用 jQuery 到页面顶部：

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

...但我想用此文本输入控件的内容动态替换占位符文本（“I Tot I Taw a Puddy Tat！”）：

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

...当 Enter 键被捣碎时。我该怎么做？

我试过了：

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

...还有这个：

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

...但是没有人做任何事情，我可以看到...

更新

现在运行得很好；但我也希望在 inputQuery val 替换文本/标题/标题时刷新推文。 IOW，我可以将文本从“jquery”更改为“html5”，但我显示的推文仍然是 jquery 推文。如何让该 div 刷新？

【问题讨论】：

【解决方案1】：

修复这条线

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

使用.html() 而不是.val() 作为h3

【讨论】：

【解决方案2】：

试试这个：

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

此处缺少右括号$("#inputQuery" <----
最后还有一个额外的括号.val())); <----

【讨论】：

【解决方案3】：

替换"#inputQuery".val()

与

$("#inputQuery").val()

代码是：

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

【讨论】：

【解决方案4】：

您缺少导致错误的关闭括号并将 .val() 替换为 .html，因为您替换的是文本而不是值

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

但你的原件是

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

你也可以这样用

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

'this' 会自动表示 inputQuery

【讨论】：

【解决方案5】：

您想设置目标元素的 HTML。此外，您可以使用“this”而不是再次按 ID 定位元素

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

【讨论】：

【解决方案6】：

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

【讨论】：

如果您使用的是$("#Twitterati h3").html(..，请将<script>alert(window);</script> 粘贴到inputQuery 字段中并按回车键。对$("#Twitterati h3").text(..重复同样的操作...你会知道的..