如何使用 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);
    })
}

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

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

已插入 html 看起来像：

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

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

我从 ASP.Net 网站 Api 收到 html 的回复 header：text/html

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

Answer 1

How to insert html to document using javascript?

你可以找到答案 here:

You can use

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

or

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

如评论中所述，这似乎没有用，元素没有样式，这是因为添加到 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>

Answer 2

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

如果有人对 ASP.Net Web API 如何 return 查看字符串并能够将其添加到 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;

P.S。代码不完全正确。它需要一些优化。

Answer 3

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

如何使用 javascript 将 html 插入文档

How to insert html to document using javascript

html

javascript

asp.net-web-api