如何使用javascript将html插入文档

我在使用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://localhost:44321/api/Tasks/1

在浏览器中，我收到的是通常样式的网页，但当我尝试将其插入文档时，html代码被转义，不显示任何内容

插入的html看起来像：

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

。。。

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

\“

用我从ASP.Net Web Api收到的html响应，标题为：

text/html

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

如何使用javascript将html插入文档

你可以找到答案：

你可以用

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

或

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

正如在注释中提到的，这似乎不起作用，并且元素没有样式，这是因为添加到

innerHTML

的字符串中的转义已关闭：有太多的

“

在提供的HTML示例中，

..

每个属性都被

“\”包围\“

，这意味着如果要查看属性值的字符串，它将类似于“

”，“…”

，这就是导致不添加样式的原因

如果删除额外的

“

，则应按预期添加HTML：

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

---

好的，看起来问题出在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;

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

元素接口的方法解析 指定的文本为HTML或XML，并将结果节点插入到 DOM树位于指定位置。它不会重新分析元素 它正在上使用，因此不会损坏现有的 元素中的元素。这避免了 序列化，使其比直接innerHTML快得多 操纵

---

与此类似，我尝试像这样附加

文档.getElementById（'main-content'）.innerHTML+=data；

。但是仍然只显示没有任何样式的文本，正如我在票据中所说的，所有类属性都被转义。看起来html中的转义已关闭：有太多

“

，html字符串应该是

“注意，当我提到“id
id
中的字符串…”时，我的意思是，作为一个例子，它发生在不仅仅是id
id
的更多地方，我在答案下面添加了一条注释，我说我不知道为什么会出现额外的引号。我的响应字符串是：
像这样。重点是，我没有说在ticket中，在ASP.Net api中，我返回这样的响应内容：
，我不明白为什么会出现更多的引号。。。