我使用了 HTML + JAVAScript，但我只能看到 JAVAScript

Question

I used HTML and JAVAscript in one page.我在一页中使用了 HTML 和 JAVAscript。

But when i enter the site, and see.但是当我进入网站时，看看。

I can see only JAVAscript, not HTML source.我只能看到 JAVAscript，而不是 HTML 源。

There are few line of HTML string, and one jaascript which creat table有几行 HTML 字符串，以及一个创建表的 jaascript

In the page, i can see only table, not few of HTML string在页面中，我只能看到表格，而不是 HTML 字符串

In the body code below,在下面的正文代码中，

Only i can see "script ~~/script" Only.只有我可以看到“脚本 ~~/script”。 I can't see this below in the web page.我在 web 页面中看不到这个。

    <br>
   <a href="./admin.html">Back to admin main page</a> <br>
   <a href="./food_list.html">Go to food list </a> <br>
   <a href="./food_detail_list.html">Go to food detail list </a> <br>

This is the body code这是正文代码

    <body>
         <br>
        <a href="./admin.html">Back to admin main page</a> <br>
        <a href="./food_list.html">Go to food list </a> <br>
        <a href="./food_detail_list.html">Go to food detail list </a> <br>

        <script>showFoodList();</script>

    </body>

this is a whole code这是一个完整的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>

        <script language="javascript">

            // this function is used to ask food to server and take a data with json
            function showFoodList(){
                var para = document.location.search;
                fetch("http://gyrjs07.dothome.co.kr/what_to_eat/foodlist.php")
                .then(function(response) {
                    return response.json();
                })
                .then(function(myJson) {
                    creatTable(myJson);
                });

                }

            function creatTable(data){
                document.write("<table width='80%' border='1' style='margin: auto; text-align: center'>");

                // for문 시작
                for ( var i=0; i<data.length ; i++) {
                    document.write("<tr>");    // <tr> : 행추가
                        // 이중 for문 시작
                        for ( var j=0; j<data[i].length ; j++) {
                            var txt=data[i][j];    // 테이블각 셀에값을 출력
                            document.write("<td>"+ txt +"</td>");     // <td> : 열추가.
                            }
                    document.write("</tr>");
                } //end for i
                document.write("</table>");   // 테이블 태그를 닫는다.
            }

        </script>
    </head>   

    <body>
         <br>
        <a href="./admin.html">Back to admin main page</a> <br>
        <a href="./food_list.html">Go to food list </a> <br>
        <a href="./food_detail_list.html">Go to food detail list </a> <br>

        <script>showFoodList()</script>;

    </body>
</html>

Answer 1

It happens because you use document.write method.发生这种情况是因为您使用了 document.write 方法。 It automatically calls document.open which removes all existing nodes in a document.它会自动调用 document.open 来删除文档中的所有现有节点。 Documentation forDocument.write() and Document.open() Document.write()和Document.open()的文档

Better approach is append children to some predefined node as it shown in snippet below.更好的方法是 append 子节点到某个预定义节点，如下面的片段所示。

 const fakeApiResponse = [ ["number", "name", "q-ty"], ["1.", "soda", "2"], ["2.", "beer", "3"], ["3", "pizza", "3"] ]; // this function is used to ask food to server and take a data with json function showFoodList() { // Emulate api call to get data Promise.resolve(fakeApiResponse).then(function(myJson) { creatTable(myJson); }); } function creatTable(data) { // Get mountig node from HTML const mountingPoind = document.getElementById("food-list"); // Create Table element and set some attributes const table = document.createElement("table"); table.setAttribute("width", "80%"); table.setAttribute("border", "1"); table.setAttribute("style", "margin: auto; text-align: center"); // Start iterate over data to create table structure for (let i = 0; i < data.length; i++) { createTableRow(table, data[i]); } // Append table structure to mounting point mountingPoind.appendChild(table); } // Creates row. Add text call createCell function to generate cells with data // and append it to parent function createTableRow(parent, rowData) { const row = document.createElement("tr"); for (let j = 0; j < rowData.length; j++) { createCell(row, rowData[j]); } parent.appendChild(row); } // Creates cell. Add text data to it and append it to parent function createCell(parent, cellData) { const cell = document.createElement("td"); cell.innerText = cellData; parent.appendChild(cell); } showFoodList();

 <.DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <br /> <a href="./admin.html">Back to admin main page</a> <br /> <a href="./food_list.html">Go to food list </a> <br /> <a href="./food_detail_list.html">Go to food detail list </a> <br /> <br /> <div id="food-list"></div> <script src="src/index.js"></script> </body> </html>

我使用了 HTML + JAVAScript，但我只能看到 JAVAScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-11 16:21:42

我使用了 HTML + JAVAScript，但我只能看到 JAVAScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-11 16:21:42

解决方案1
1 已采纳 2020-04-11 16:21:42