JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.6.2 Inserting Nodes

15.6.2 Inserting Nodes

Once you have a new node, you can insert it into the document with the Node methods appendChild() or insertBefore(). appendChild() is invoked on the Element node that you want to insert into, and it inserts the specified node so that it becomes the last Child of that node.

insertBefore() is like appendChild(), but it takes two arguments. The first argument is the node to be inserted. The second argument is the node before which that node is to be inserted. This method is invoked on the node that will be the parent of the new node, and the second argument must be a child of that parent node. If you pass null as that second argument, the insertBefore() behaves like appendChild() and inserts at the end.

Here is a simple function for inserting a node at a numerical index. It demonstrates both appendChild() and insertBefore(): // Insert the child node into parent so that it becomes child node n function insertAt(parent, child, n) { if (n < 0 || n > parent.childNodes.length) throw new Error("invalid index"); else if (n == parent.childNodes.length) parent.appendChild(child); else parent.insertBefore(child, parent.childNodes[n]); }

If you call appendChild() or insertBefore() to insert a node that is already in the document, that node will automatically be removed from its current position and reinserted at its new position: there is no need to explicitly remove the node. Example 15-4 shows a function for sorting the rows of a table based on the values of cells in a specified column. It doesn’t create any new nodes but uses appendChild() to change the order of existing nodes.

Example 15-4. Sorting the rows of a table

// Sort the rows in firstof the specified table according to // the value of nth cell within each row. Use the comparator function // if one is specified. Otherwise, compare the values alphabetically. function sortrows(table, n, comparator) {

var tbody = table.tBodies[0]; // First; may be implicitly created

var rows = tbody.getElementsByTagName("tr"); // All rows in the tbody

rows =,0); // Snapshot in a true array

// Now sort the rows based on the text in the nthelement

rows.sort(function(row1,row2) {

var cell1 = row1.getElementsByTagName("td")[n]; // Get nth cell

var cell2 = row2.getElementsByTagName("td")[n]; // of both rows

var val1 = cell1.textContent || cell1.innerText; // Get text content

var val2 = cell2.textContent || cell2.innerText; // of the two cells

if (comparator) return comparator(val1, val2); // Compare them!

if (val1 < val2) return -1;

else if (val1 > val2) return 1;

else return 0;


15.6 Creating, Inserting, and Deleting Nodes | 383

// Now append the rows into the tbody in their sorted order. // This automatically moves them from their current location, so there // is no need to remove them first. If thecontains any // nodes other thanelements, those nodes will float to the top. for(var i = 0; i < rows.length; i++) tbody.appendChild(rows[i]);


// Find theelements of the table (assuming there is only one row of them) // and make them clickable so that clicking on a column header sorts // by that column. function makeSortable(table) {

var headers = table.getElementsByTagName("th"); for(var i = 0; i < headers.length; i++) { (function(n) { // Nested funtion to create a local scope headers[i].onclick = function() { sortrows(table, n); }; }(i)); // Assign value of i to the local variable n } }

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1