如何使用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\"="">...

下面的代碼是從代碼示例中復制的引導模式。 如您所見，出現了轉引號的符號\\" 。

用html響應我從ASP.Net Web Api收到了標頭： text/html

我該如何使用javascript將此html代碼插入文檔中？

Answer 1

如何使用javascript將html插入文檔？

您可以在這里找到答案：

您可以使用

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

要么

 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服務中。 由於某些原因，在調試模式下向我顯示了我返回給用戶的正確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;

PS代碼不完全正確。 它需要一些優化。

Answer 3

Element接口的insertAdjacentHTML（）方法將指定的文本解析為HTML或XML，並將結果節點插入到DOM樹中的指定位置。 它不會重新解析正在使用該元素的元素，因此不會破壞該元素內部的現有元素。 這避免了額外的序列化步驟，使其比直接的innerHTML操作快得多。