How to use document.write() method to write into current html page?

Question

I am little bit poor with the HTML & javascript.

I am using document.write() method in javascript to populate some data (in table) after clicking on the button. But as i click on the button it populates in the new page. Since my requirement is that, when i click on the plus sign, it should show the connected objects below that sign like tree or structure browser.

So my code is ,

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

And my javascript method is :

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>

To achieve this task, I am using a button & calling a function PopulateData() on onclick(). Initially i hard-coded all the values. Using PopulateData() method on onclick is one way. So plz suggest me any other easiest ways so that i could achieve this ?

You cannot. If the document is in a closed state, document.write can only have any effect if it opens a new document. If you want to modify an existing document then you must use DOM manipulation with document.createElement, document.createTextNode, document.appendChild and friends. There are plenty of tutorials out there. — Quentin
– Quentin, Commented Aug 28, 2014 at 12:42
@mingos — Because it isn't an answer. It is just a pointer in the right direction. For it to be an answer I'd have to write a tutorial on how to use them and the Internet doesn't need another one of those. — Quentin
– Quentin, Commented Aug 28, 2014 at 12:53
@Quentin, As i have to populate the connected data again in the child table. So how i can achieve this ? The document.createTextNode method printing only text no any table there. — Gopal Singh
– Gopal Singh, Commented Aug 28, 2014 at 12:57

LcSalazar · Accepted Answer · 2014-08-28 13:13:47Z

A simple (not pretty) way of writing content to any element after the page is loaded is through the innerHTML property:

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

In your case, if you want to add content to the body, you would do:

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

But this is just a simple hack... You should really read about DOM manipulation, like document.createElement("table"); and document.body.appendChild().

Collectives™ on Stack Overflow

How to use document.write() method to write into current html page?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related