如何使用document.write（）方法寫入當前HTML頁面？

Question

我的HTML和javascript有點差。

我在單擊按鈕后使用javascript中的document.write（）方法填充一些數據（表中）。 但是，當我單擊按鈕時，它將填充在新頁面中。 由於我的要求是，當我單擊加號時，它應在該符號下方顯示連接的對象，例如樹或結構瀏覽器。

所以我的代碼是

    <tr style="{display='none'}"> 
    <td align="center" class="bord"><input type="checkbox" value="<%= strObjectId %>" name="rdel"></td>
    <td class="bord"><%= strId %></td>

    <td align="center" class="bord"><input type="button" name = "button" value="Plus" onclick ="PopulateData()"/></td>

      <!-- <table id="tbl1">     <tr><td class="bord">22</td>
     <td class="bord">Part</td>
    <td class="bord">part001</td>
    <td class="bord">desc</td>
    <td class="bord">Owner</td>
    <td class="bord">ObjectId</td>
     </tr></table>
    -->
    <td class="bord"><%= strType %></td>
    <td class="bord"><a href="ltSearchDocProperties.jsp?" target ="_blank"><%= strName.concat("_").concat(strObjectId) %></a></td>
    <td class="bord"><%= strDesc %></td>
    <td class="bord"><%= strOwner %></td>        
    <td align="center" class="bord"><a href="ltFileCheckin.jsp?objectId=<%=strObjectId%>" target ="_blank"><img src="/DMS/images/iconSmallDocumentAttachment.gif"><%= strObjectId %></a></td>  
     <!--<td class="bord"></td>
    <td class="bord"></td>
    <td class="bord"></td>-->
    <td class="bord"></td>
    <td class="bord"></td>   
    </tr>      

而我的javascript方法是：

function PopulateData()
{  // alert("hello");   
   document.write("<table><tr><td class=\"bord\">22</td><td>Part</td><td>part001</td> <td>descrip</td><td>Owner</td><td>ObjectId</td></tr></table>");
}
</script>

為了完成此任務，我使用了一個按鈕，並在onclick（）上調用了PopulateData（）函數。 最初，我對所有值進行硬編碼。 在onclick上使用PopulateData（）方法是一種方法。 因此，請給我建議任何其他最簡單的方法，以便我可以實現這一目標？

Answer 1

在頁面加載后，將內容寫到任何元素的簡單（不漂亮）方法是通過innerHTML屬性：

var html = element.innerHTML;
html += "new content";
element.innerHTML = html;

對於您的情況，如果要向正文添加內容，則可以執行以下操作：

function PopulateData() {
    var html = document.body.innerHTML;
    html += "<table><tr><td class=\"bord\">22</td><td>Part</td><td>part001</td> <td>descrip</td><td>Owner</td><td>ObjectId</td></tr></table>";
    document.body.innerHTML = html;
}

但這只是一個簡單的技巧……您應該真正了解DOM操作，例如document.createElement("table"); 和document.body.appendChild() 。

• https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
• https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild