<a> 标签的 HTML 更改文本答案

【问题标题】：Html change text of <a> tag<a> 标签的 HTML 更改文本
【发布时间】：2016-04-26 14:18:03
【问题描述】：

我目前正在使用以下标签，该标签呈现为一个按钮，上面只有一个图标。
我希望这是一个图标，后跟Export PDF。

通常情况下，我不会像这样创建按钮，但我使用的是为我生成按钮的 Kendo 控件。渲染后，按钮如下所示：

<a href="" role="button" class="k-tool k-group-start k-group-end" 
    unselectable="on" title="Export PDF">
    <span unselectable="on" class="k-tool-icon k-pdf"></span>
    <span class="k-tool-text">Export PDF</span>
</a>

我正在尝试使用 JQuery 将我想要的文本注入到元素中，如下所示：

<script>
        $(document).ready(function () {
            $('.k-tool-icon').text("Export PDF");
        });
</script>

然而这并没有改变任何东西。我仍然得到只有一个图标的按钮。

编辑：下面是渲染上面发布的 html 的 C# MVC kendo 编辑器：

@(Html.Kendo().Editor()
      .Name("editor")
      .HtmlAttributes(new { style = "height:900px" })
      .Pdf(pdf => pdf
          .Margin(20, 20, 20, 20)
          .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
      )
      .Tools(tools => tools
          .Clear()
          .Pdf()
      )
      .Value(@<text>
        <code>
            @Html.Raw(HttpUtility.HtmlDecode(Model.ReportString))
        </code>
    </text>)
    )

【问题讨论】：

为我工作jsfiddle.net/j08691/f0pcyx1q
该图标可能使用了文本替换技术。 .k-tool-text span 的样式有什么问题？
@j08691 也许它对你有用，因为你实际上并没有使用剑道编辑器？我不知道。但是它绝对不适合我
@moopet 你能举个例子吗我不知道你在做什么
您应该使用任何适用的剑道工具更新您问题上的标签。正如我所指出的，您提供的代码有效。

标签： jquery html .net razor kendo-ui

【解决方案1】：

如果要替换内容，使用原生 DOM 会快得多

在您上面提供的代码示例中，按钮前后的文本相同。

Before: <span class="k-tool-text">Export PDF</span>
After: $('.k-tool-icon').text("Export PDF");

// Use Native DOM for better performace
$(document).ready(function () {
    document.querySelector('.k-tool-icon').textContent = `Export PDF`;
});

但无论如何，您在此处显示的代码是有效的。

【讨论】：

我已经发布了我正在使用的剑道控件的代码。这一定是它对我不起作用但对这里直接使用 kendo 生成的 html 的其他人起作用的原因

【解决方案2】：

@peggy，可能你的问题是文档准备好后剑道进程延迟了很多，而不是尝试添加由剑道生成的元素仍然不存在的文本。

当剑道已经完成处理时，尝试在某个事件上添加$('.k-tool-icon').text("Export PDF");；

【讨论】：