insertRow Method Internet Development Index --------------------------------------------------------------------------------Creates a new row (tr) in the table, and adds the row to the rows collection. SyntaxoTR = object.insertRow( [iIndex]) ParametersiIndex Optional. Integer that specifies where to insert the row in the rows collection. The default value is -1, which appends the new row to the end of the rows collection. Return ValueReturns the tr element object if successful, or null otherwise. ResIf you insert a row in a tFoot, tBody, or tHead, you also need to add the row to the rows collection for the table. If you insert a row in the table, you also need to add the row to the rows collection for the tBody. If you specify an index, the index should be relative to the rows collection for the element that first contains the tr. For example, if you call this method for a tBody, you must specify an index value relative to the rows collection that is on the tBody, not the table. The preferred technique for inserting a row is to add the row at the end of the rows collection. It is faster to add a row at the end of a table than somewhere in the middle. To add a row at the end of the collection, specify the -1 value, or the length of the rows collection minus 1.ExampleThis example uses the insertRow method to add a row to the table. myNewRow = document.all.myTable.insertRow() Standards InformationThis method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 . Applies To[ Object Name ] Platform Version Win16: Win32: Windows CE: Unix: Mac: Version data is listed when the mouse hovers over a link, or the link has focus. TABLE, TBODY, TFOOT, THEAD Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. See AlsorowIndex, rows, sectionRowIndex
insertCell Method Internet Development Index --------------------------------------------------------------------------------Creates a new cell in the table row (tr), and adds the cell to the cells collection. SyntaxoTD = TR.insertCell( [iIndex]) ParametersiIndex Optional. Integer that specifies where to insert the cell in the tr. The default value is -1, which appends the new cell to the end of the cells collection. Return ValueReturns the td element object if successful, or null otherwise. ResThe preferred technique for inserting a cell is to add the cell at the end of the cells collection. It is faster to add a cell at the end of a row than somewhere in the middle. To add a cell at the end of the collection, specify the -1 value, or the length of the cells collection minus 1.ExampleThis example uses the insertCell method to add a cell to the end of the tr. myNewCell = document.all.myTable.rows[0].insertCell() Standards InformationThis method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 . Applies To[ Object Name ] Platform Version Win16: Win32: Windows CE: Unix: Mac: Version data is listed when the mouse hovers over a link, or the link has focus. TR Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. See AlsodeleteCell, insertRow
/******************************************************************************************* * CommonJavaScriptDOM * =================== * * This script contains a set of functions for dynamically adding different elements to a form * using the DOM object model.With the exception of newH1(), these functions also return the * element that has been created, so that it can be further manipulated. * These functions will be most useful when the page has to be built on the basis of input from * a file or XML tree. A table of 1-n rows and columns could be built using a series of data * records for instance. * * Under other circumstances it is generally easier to use the 'innerHTML' property of an appropriate element * to dynamically manipulate web pages from Javascript. * * Function List * ============= * * newLabel(parent, label) * newH1(htmlElement, label) * clearMessage(tagId,msg) * setMessage(tagId,msg) * renewList(parent,element); * * newTable(parent, name, border, width) * newRow(parent, name) * newColumn(parent, name,label) * * newForm(parent,formName,action) * newSelect(parent, name) * newOption(parent, value, label) * newButton(parent, name, label, functionName, func) * * *******************************************************************************************//**************************************************** * General functions *****************************************************///create a new label and add it to a parent element function newLabel(parent, label) { var addLabel = document.createTextNode(label); document.getElementById(parent).appendChild(addLabel); return addLabel; }//create a new label and add it to a parent element function newH1(htmlElement, label) { htmlElement.innerHTML += "<h1>" + label + "</h1>"; }/****************************************************** * Tables oriented functions *******************************************************/function newTable(parent, name, border, width) { //alert('new table with parent'); var addTable = document.createElement("table"); addTable.setAttribute('border',border); addTable.setAttribute('width',width); addTable.setAttribute('id',name); document.getElementById(parent).appendChild(addTable); return addTable; } function newRow(parent, name) { var addRow = document.createElement("tr"); addRow.setAttribute('id',name); document.getElementById(parent).appendChild(addRow); return addRow; }
function newColumn(parent, name,label) { var addColumn = document.createElement("td"); addColumn.setAttribute('id',name); addColumn.appendChild(document.createTextNode(label)); document.getElementById(parent).appendChild(addColumn); return addColumn; } /****************************************************** * Forms oriented functions *******************************************************///create a new form and add it to a parent element function newForm(parent,formName,action) { var addForm = document.createElement("form"); addForm.setAttribute('name',formName); addForm.setAttribute('id',formName); addForm.setAttribute('action',action); addForm.setAttribute('onsubmit','return false'); var parentNode = document.getElementById(parent); //('parent ' + parent + ' ' + parentNode); parentNode.appendChild(addForm); return addForm; }//create a new selection list and add it to a parent element function newSelect(parent, name) { var addSelect = document.createElement("select"); addSelect.setAttribute('id',name); addSelect.setAttribute('name',name); var location = document.getElementById(parent); location.appendChild(addSelect); return addSelect; } //refresh a selection list function refreshSelect(parent, name) { var location = document.getElementById(parent); location.removeChild(document.getElementById(name)); addSelect = newSelect(parent,name); return addSelect; }//create a new selection list node and add it to a parent element function newOption(parent, value, label) { var addOption = document.createElement("option"); addOption.setAttribute('value',value); addOption.appendChild(document.createTextNode(label)); document.getElementById(parent).appendChild(addOption); return addOption; } //create a new button with a processing function and add it to a parent element function newButton(parent, name, label, functionName, func) { var addButton = document.createElement('button');
//IE seems to need to use the DHTML interface for events //http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
if (window.ActiveXObject) //we are dealing with IE (groan) bSuccess = addButton.attachEvent('onclick', func); else { addButton.setAttribute('onclick', functionName); } addButton.setAttribute('id',name); addButton.setAttribute('name',name); addButton.appendChild(document.createTextNode(label)); document.getElementById(parent).appendChild(addButton); return addButton; } function buttonClicked() { alert(document.fair.fairList.value + ' went with Uncle Tom Cobley');
} /******************************************************************* setMessage(tagId,msg) Puts a message onto a page at the identified tag Parameters: tagId - the id of the tag where the msg is to be displayed msg - the text of the message to be displayed Returns: nothing Sample usage: setMessage("errMsg","HELP!!!");********************************************************************/function setMessage(tagId,msg){ document.getElementById(tagId).firstChild.nodeValue=msg; } /******************************************************************* clearMessage(tagId,msg) Clears a message on a page at an identified tag Parameters: tagId - the id of the tag where the error msg is to be displayed Returns: nothing Sample usage: clearMessage("errMsg");********************************************************************/function clearMessage(tagId){ if (document.getElementById(tagId).firstChild != null) document.getElementById(tagId).firstChild.nodeValue=""; } /*********************************************************** 在对应的node 上添加一个事件 obId*****************************************/ function addEvent(obId,ev,evName){ var ob = document.getElementById(obId); if (window.ActiveXObject) bSuccess = ob.attachEvent(evName, ev); else { ob.setAttribute(evName, evName); } }
insertRow Method Internet Development Index --------------------------------------------------------------------------------Creates a new row (tr) in the table, and adds the row to the rows collection. SyntaxoTR = object.insertRow( [iIndex])
ParametersiIndex Optional. Integer that specifies where to insert the row in the rows collection. The default value is -1, which appends the new row to the end of the rows collection. Return ValueReturns the tr element object if successful, or null otherwise. ResIf you insert a row in a tFoot, tBody, or tHead, you also need to add the row to the rows collection for the table. If you insert a row in the table, you also need to add the row to the rows collection for the tBody. If you specify an index, the index should be relative to the rows collection for the element that first contains the tr. For example, if you call this method for a tBody, you must specify an index value relative to the rows collection that is on the tBody, not the table. The preferred technique for inserting a row is to add the row at the end of the rows collection. It is faster to add a row at the end of a table than somewhere in the middle. To add a row at the end of the collection, specify the -1 value, or the length of the rows collection minus 1.ExampleThis example uses the insertRow method to add a row to the table. myNewRow = document.all.myTable.insertRow()
Standards InformationThis method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 . Applies To[ Object Name ]
Platform Version
Win16:
Win32:
Windows CE:
Unix:
Mac:
Version data is listed when the mouse hovers over a link, or the link has focus.
TABLE, TBODY, TFOOT, THEAD
Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. See AlsorowIndex, rows, sectionRowIndex
insertCell Method Internet Development Index --------------------------------------------------------------------------------Creates a new cell in the table row (tr), and adds the cell to the cells collection. SyntaxoTD = TR.insertCell( [iIndex])
ParametersiIndex Optional. Integer that specifies where to insert the cell in the tr. The default value is -1, which appends the new cell to the end of the cells collection. Return ValueReturns the td element object if successful, or null otherwise. ResThe preferred technique for inserting a cell is to add the cell at the end of the cells collection. It is faster to add a cell at the end of a row than somewhere in the middle. To add a cell at the end of the collection, specify the -1 value, or the length of the cells collection minus 1.ExampleThis example uses the insertCell method to add a cell to the end of the tr. myNewCell = document.all.myTable.rows[0].insertCell()
Standards InformationThis method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 . Applies To[ Object Name ]
Platform Version
Win16:
Win32:
Windows CE:
Unix:
Mac:
Version data is listed when the mouse hovers over a link, or the link has focus.
TR
Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. See AlsodeleteCell, insertRow
我这个例子是在一个ajax里面的例子里改出来的。里面都是用appendChild来插入的~请问这个appendChild我在这里用错了吗?
顶~~这里的appendChild错了吗?
* CommonJavaScriptDOM
* ===================
*
* This script contains a set of functions for dynamically adding different elements to a form
* using the DOM object model.With the exception of newH1(), these functions also return the
* element that has been created, so that it can be further manipulated.
* These functions will be most useful when the page has to be built on the basis of input from
* a file or XML tree. A table of 1-n rows and columns could be built using a series of data
* records for instance.
*
* Under other circumstances it is generally easier to use the 'innerHTML' property of an appropriate element
* to dynamically manipulate web pages from Javascript.
*
* Function List
* =============
*
* newLabel(parent, label)
* newH1(htmlElement, label)
* clearMessage(tagId,msg)
* setMessage(tagId,msg)
* renewList(parent,element);
*
* newTable(parent, name, border, width)
* newRow(parent, name)
* newColumn(parent, name,label)
*
* newForm(parent,formName,action)
* newSelect(parent, name)
* newOption(parent, value, label)
* newButton(parent, name, label, functionName, func)
*
*
*******************************************************************************************//****************************************************
* General functions
*****************************************************///create a new label and add it to a parent element
function newLabel(parent, label) {
var addLabel = document.createTextNode(label);
document.getElementById(parent).appendChild(addLabel);
return addLabel;
}//create a new label and add it to a parent element
function newH1(htmlElement, label) {
htmlElement.innerHTML += "<h1>" + label + "</h1>";
}/******************************************************
* Tables oriented functions
*******************************************************/function newTable(parent, name, border, width) {
//alert('new table with parent');
var addTable = document.createElement("table");
addTable.setAttribute('border',border);
addTable.setAttribute('width',width);
addTable.setAttribute('id',name);
document.getElementById(parent).appendChild(addTable);
return addTable;
}
function newRow(parent, name) {
var addRow = document.createElement("tr");
addRow.setAttribute('id',name);
document.getElementById(parent).appendChild(addRow);
return addRow;
}
function newColumn(parent, name,label) {
var addColumn = document.createElement("td");
addColumn.setAttribute('id',name);
addColumn.appendChild(document.createTextNode(label));
document.getElementById(parent).appendChild(addColumn);
return addColumn;
} /******************************************************
* Forms oriented functions
*******************************************************///create a new form and add it to a parent element
function newForm(parent,formName,action) {
var addForm = document.createElement("form");
addForm.setAttribute('name',formName);
addForm.setAttribute('id',formName);
addForm.setAttribute('action',action);
addForm.setAttribute('onsubmit','return false');
var parentNode = document.getElementById(parent);
//('parent ' + parent + ' ' + parentNode);
parentNode.appendChild(addForm);
return addForm;
}//create a new selection list and add it to a parent element
function newSelect(parent, name) {
var addSelect = document.createElement("select");
addSelect.setAttribute('id',name);
addSelect.setAttribute('name',name);
var location = document.getElementById(parent);
location.appendChild(addSelect);
return addSelect;
}
//refresh a selection list
function refreshSelect(parent, name) {
var location = document.getElementById(parent);
location.removeChild(document.getElementById(name));
addSelect = newSelect(parent,name);
return addSelect;
}//create a new selection list node and add it to a parent element
function newOption(parent, value, label) {
var addOption = document.createElement("option");
addOption.setAttribute('value',value);
addOption.appendChild(document.createTextNode(label));
document.getElementById(parent).appendChild(addOption);
return addOption;
}
//create a new button with a processing function and add it to a parent element
function newButton(parent, name, label, functionName, func) {
var addButton = document.createElement('button');
//IE seems to need to use the DHTML interface for events
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
if (window.ActiveXObject) //we are dealing with IE (groan)
bSuccess = addButton.attachEvent('onclick', func);
else {
addButton.setAttribute('onclick', functionName);
}
addButton.setAttribute('id',name);
addButton.setAttribute('name',name);
addButton.appendChild(document.createTextNode(label));
document.getElementById(parent).appendChild(addButton);
return addButton;
}
function buttonClicked() {
alert(document.fair.fairList.value + ' went with Uncle Tom Cobley');
}
/*******************************************************************
setMessage(tagId,msg)
Puts a message onto a page at the identified tag
Parameters: tagId - the id of the tag where the msg is to be displayed
msg - the text of the message to be displayed
Returns: nothing
Sample usage: setMessage("errMsg","HELP!!!");********************************************************************/function setMessage(tagId,msg){
document.getElementById(tagId).firstChild.nodeValue=msg;
}
/*******************************************************************
clearMessage(tagId,msg)
Clears a message on a page at an identified tag
Parameters: tagId - the id of the tag where the error msg is to be displayed
Returns: nothing
Sample usage: clearMessage("errMsg");********************************************************************/function clearMessage(tagId){
if (document.getElementById(tagId).firstChild != null)
document.getElementById(tagId).firstChild.nodeValue="";
}
/***********************************************************
在对应的node 上添加一个事件
obId*****************************************/
function addEvent(obId,ev,evName){
var ob = document.getElementById(obId); if (window.ActiveXObject)
bSuccess = ob.attachEvent(evName, ev);
else {
ob.setAttribute(evName, evName);
}
}
document.getElementById("results").childNodes[0].appendChild(row);
function addrow()
{
var row = document.createElement("tr");
var cell = document.createElement("td");
var txtnode = document.createTextNode("我是加出来的!");
cell.appendChild(txtnode);
row.appendChild(cell);
document.getElementById("results").children[0].appendChild(row);
}
</script>