Question

我正试图通过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>

HTML代码：

<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中打印字符串的方法吗？

Answer 1

首先尝试：

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;
    });
});

Answer 2

**<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

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

2 个答案: