动态替换/生成 div 中的 HTML 内容 | .NET + jQuery答案

【问题标题】：Replace/Generate HTML content in div dynamically | .NET + JQuery动态替换/生成 div 中的 HTML 内容 | .NET + jQuery
【发布时间】：2021-10-31 06:21:17
【问题描述】：

我正在尝试根据 Bing 地图中按下的图钉显示/替换 div 内的 HTML 内容。我知道我应该查看 JQuery .html() 但我看不到如何将变量放入 HTML 标记中。

示例代码：

function pushpinClickedCallback(e) {
        if (e.target.metadata) {
            var data = e.target.metadata.title;  <-- how to make this include the JS variable and HTML tags
            $('#infoPane').html(data);
        }
// var e above is a pushpin in Bing Maps, infoPane is the div

每次触发回调时，都会显示不同的数据。我什至应该考虑这样做吗？或者我应该创建一个新的 div 并每次都将其销毁（如果快速按下同一个图钉多次则效率低下）？

【问题讨论】：

您将自己构建 HTML 字符串。如果您在此处获得标题，只需构建您想要的任何 HTML... 例如：var html_data = "
" + data + "
";
是的，这实际上很简单，哈哈……我想我花了这么多小时才想得太多。谢谢你:)

标签： javascript html jquery asp.net asp.net-mvc

【解决方案1】：

您的变量data 将包含一个字符串。使用 JavaScript 字符串函数操作字符串以替换您的标题字符串并添加您需要的任何 HTML 标记。例如：

var data = e.target.metadata.title; // "Pushpin title"
var htmlString = "<div class=\"pin-text\">" + data + "</div>";
$("#infoPane").html(htmlString); // Replace infoPane element contents

【讨论】：