如何使用javascript将html插入文档

Question

我在使用 javascript 将 html 插入文档时遇到问题。

尝试将 html 插入文档的代码：

function loadTaskPage(taskId){
    fetch("https://localhost:44321/api/Tasks/1")
    .then(function(response){
        return response.text();
    }).then(function(data){
        document.body.insertAdjacentHTML('beforeend', data);
    }).catch(function(error){
        alert(error);
    })
}

这部分代码我取自教程，教程的源代码可以在这个链接中找到：https://github.com/bstavroulakis/progressive-web-apps/blob/master/car-deals/js/carService.js

如果我尝试在浏览器中打开此链接https://localhost:44321/api/Tasks/1，我会收到正常样式的网页，但是当我尝试将其插入文档时，html 代码会被转义并且不显示任何内容。

插入的 html 看起来像：

<div id="\"myModal\"" class="\"modal" fade\"="">...

下面的代码是从代码示例复制而来的引导模式。如您所见，出现了符号\" 转义引号。

我从我的 ASP.Net Web Api 收到的带有标题的 html 响应：text/html

我应该如何使用 javascript 将此 html 代码插入到文档中？

Answer 1

Element接口的insertAdjacentHTML()方法解析 将指定的文本作为 HTML 或 XML 并将结果节点插入 指定位置的 DOM 树。它不会重新解析元素 它正在被使用，因此它不会破坏现有的 该元素内的元素。这避免了额外的步骤 序列化，比直接innerHTML快得多 操纵。

Answer 2

好的，看起来问题出在 api 服务中。在调试模式下的某些原因向我显示了我返回给用户的正确 html。因此，在对 api 代码进行了一些更改后，一切正常。

如果有人对 ASP.Net Web API 如何将视图作为字符串返回并能够将其添加到 html 感兴趣，您只需添加对 RazorEngine 的引用并使用以下代码：

        var response = new HttpResponseMessage(HttpStatusCode.OK);
        var viewPath = HttpContext.Current.Server.MapPath(@"~/Views/Tasks/TaskDetails.cshtml");
        var template = File.ReadAllText(viewPath);

        var key = new NameOnlyTemplateKey("TaskDetails", ResolveType.Global, null);
        if(!Engine.Razor.IsTemplateCached(key, null))
            Engine.Razor.AddTemplate(key, new LoadedTemplateSource(template));

        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        Engine.Razor.RunCompile(key, sw, null, model);

        response.Content = new StringContent(sb.ToString());

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");

        return response;

附：代码并不完全正确。它需要一些优化。

Answer 3

如何使用 javascript 将 html 插入到文档中？

你可以找到答案here:

你可以使用

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

或

document.getElementById("parentID").innerHTML+= "new content"

正如 cmets 中提到的，这似乎不起作用并且使元素没有样式，这是因为添加到 innerHTML 的字符串中的转义已关闭：" 太多。

在提供的 HTML 示例 <div id="\"myModal\"" class="\"modal" fade\"="">... 中，每个属性都被 "\" ... \"" 包围，这意味着如果您要查看属性值的字符串，它看起来像 '" ... "'，这就是导致样式的原因不添加。

如果您删除多余的"，则应按预期附加 HTML：

<div id=\"myModal\" class=\"modal fade\">...

查看这个例子，展示不同的转义会发生什么：

document.getElementById("foo").innerHTML += '<div class="\"bar\"">Hello World!</div>'; // Escaped with too many `"`
document.getElementById("foo").innerHTML += '<div class=\"bar\">Hello World!</div>'; // Properly escaped

.bar {
  color: red;
}

<div id="foo">

</div>