如何在javascript中将字符串打印为html

How to print a string to html in javascript?

本文关键字：字符串 打印 html javascript      更新时间：2023-09-26

我正在尝试通过 document.write() 在 javascript 中将字符串打印为 html，但似乎当我在函数中使用document.write()其他代码时不再起作用。

JavaScript 代码：

     <script type="text/javascript">
            var my_d = {{ pass_kegg|safe }};
            var myList_tmp = {{ pass_tmp|safe }};
            var epgd = "EPGD"
            var kegg = "KEGG"
            function buildHtmlTable(myList,printSource) {
                 var columns = addAllColumnHeaders(myList);
                 document.write(printSource);
                 // Builds the HTML Table out of myList json data from Ivy restful service.
            }

            function addAllColumnHeaders(myList) {
             // Adds a header row to the table and returns the set of columns.
             // Need to do union of keys from all records as some records may not contain
             // all records
            }
    </script>

网页代码：

<body onload="buildHtmlTable(my_d, epgd);buildHtmlTable(myList_tmp, kegg)">
        <table id="excelDataTable" border="1">
        </table>
</body>

最初，有一个从JSON转换的html表可以在网页中看到。但是当我使用document.write()打印字符串时epgd我的网页中只能看到两个字符串。似乎其他代码尚未运行。我在谷歌上搜索过这个问题，有人说document.write()只能与页面onload一起使用，但如果在运行时使用它，它会替换整个文档。那么除了document.write()之外，还有人可以为我提供一种在 JavaScript 中打印字符串的方法吗？

第一次尝试：

document.getElementById("mytableid").innerHTML += "<tr><td>str</td></tr>";

但我建议如下：

var myTable = document.getElementById("myTableId");
var row = myTable.insertRow(-1);
var cell = roww.insertCell(-1);
cell.textContent="data1";

例如，如果您有

var data = [ 
    [ "one" , "two" ],
    [ "alpha", "betha" ],
    [ "a", "b" ]
];
var myTable = document.getElementById("myTableId");
data.forEach(function(dataRows){
    var row = myTable.insertRow(-1);
    dataRows.forEach(function(dataCell){
        var cell = row.insertCell(-1);
        cell.textContent = dataCell;
    });
});

**<b>This code is working fine. I am using this code</b>**
//define json in string
var jsonPublishData ='[{"tag":"div","attr":[{"class":"box-footer"}],"child":"Hello"}]';
//convert json to html
var resp_html = json_to_html(jsonPublishData, true);
 //define a variable and store html respons data in this variable 
var publishButtonHTML= resp_html.outerHTML
//alert out
alert(publishButtonHTML);
//print out on console
console.log(publishButtonHTML);

// Start finction for JSON to HTML
function json_to_html(json_components, isDiv = false, finalHTML = "")
{
    var jsoncompo = (isDiv) ? JSON.parse(json_components) : json_components;
    var json_len = (jsoncompo).length;
    if (finalHTML == "" && isDiv)
    {
        finalHTML = document.createElement("div");
    }
    for (var i = 0; i < json_len; i++)
    {
        var childele = '';
        var html_components = jsoncompo[i];
        var attributes_arr = html_components.attr;
        finalHTML1 = createstructure(html_components.tag, attributes_arr, html_components.child);
        finalHTML.appendChild(finalHTML1);
    }
    return finalHTML;
}
// End finction for JSON to HTML

// Start finction for create HTMLstructure from json
function createstructure(type, props, children) {
    var el = document.createElement(type),
            key;
    for (key in props) {
        var keyprops = props[key];
        var hasOwn = Object.keys(keyprops);
        for (var i = 0; i < hasOwn.length; i++)
        {
            el.setAttribute(hasOwn[i], keyprops[hasOwn[i]]);
        }
    }
    if (typeof children != 'undefined') {
        if (Array.isArray(children)) {
            json_to_html(children, false, el);
        } else {
            textnode = document.createTextNode(children);
            el.appendChild(textnode);
        }
    }
    return el;
}
// Start finction for create HTMLstructure from json
相关文章：