I'm not an expert in this area but I have written sample code in the past that did something similar to this. The approach I took was the following: in your Cocoa class where you want to update the text insert code similar to
WebScriptObject *webScriptObject = [_webView windowScriptObject];
id result = [webScriptObject callWebScriptMethod:@"setTableRows" withArguments:[NSArray arrayWithObject:fauxData]];
where fauxData is whatever you want to pass to JS, and in the JS source have something similar to
var mytable = document.getElementById("myTable");
var mytbody = document.getElementById("myTbody");
var docFragment = document.createDocumentFragment();
var myNewtbody = document.createElement("tbody");
myNewtbody.id = "myTbody";
var trElem, tdElem, txtNode;
for(var j = 0; j < row_data.length; ++j) {
trElem = document.createElement("tr");
trElem.className = "tr" + (j%2);
tdElem = document.createElement("td");
tdElem.className = "col0";
txtNode = document.createTextNode(row_data[j].lastName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
tdElem = document.createElement("td");
tdElem.className = "col4";
txtNode = document.createTextNode(row_data[j].firstName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
docFragment.appendChild(trElem);
}
myNewtbody.appendChild(docFragment);
mytable.replaceChild(myNewtbody, mytbody);
and of course your HTML should have something like
<table id="myTable">
<thead id="myThead">
<tr>
<th>Last</th>
<th>First</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
Obviously this fills in rows of data in a table, but updating text would be similar.