|
JavaScript - Ie Insertbefore();
I try to insert a list item into an Ul,it works fine except in IE.
PHP Code: var menu_name = document.getElementById("main").value; var real_pos = document.getElementById("main_pos").value; var menu_pos = real_pos-1; var ul = document.getElementById("vert_menu"); var li = document.createElement("li"); li.setAttribute("name","list"); li.innerHTML = "<a href='#nogo'>" + menu_name + "</a>"; line36-----> ul.insertBefore(li,document.getElementsByName("list")[menu_pos]); Jslint says the code is valid. IE says:invalid argument line 36,character6. Similar TutorialsSo here is what I have so far. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TableDOM</title>
<script type="text/javascript">
//Appends a new row to the tea table
function addTeaGrade(s){
var tableElem, trElem, tdElem, textElem
//get a handle for the table
tableElem = document.getElementsByTagName("table")[0]
//create text element with text entered by user
textElem = document.createTextNode(s)
//alert(textElem.nodeValue)
//create td element
tdElem = document.createElement("td")
//create tr element
trElem = document.createElement("tr")
//assemble row:
//footbone connected to the ankle bone,
//ankle bone connected to the shin bone, etc.
tdElem.appendChild(textElem)
trElem.appendChild(tdElem)
//get a handle for the TBODY element
var tbodyElem = document.getElementsByTagName('tbody')[0]
//appendChild() inserts the new row below the header of the table.
//tbodyElem.appendChild(trElem) //this here replaces the new row at the bottom of the element
tbodyElem.insertBefore(trElem, tbodyElem.getElementById("hdr-row"))
}
</script>
</head>
<body>
<h3>Example: Dynamic HTML Table</h3>
Demonstrates how to add table elements using the DOM API.
<br /><br />
<table border="1">
<tr id="hdr-row">
<th>
<a href="http://www.2basnob.com/grading-tea.html">Grades of tea</a>
</th>
</tr>
<tr id="row-1">
<td>
Golden Flowery Orange Pekoe
</td>
</tr>
<tr id="row-2">
<td>
Tippy Golden Flowery Orange Pekoe
</td>
</tr>
</table>
<br />
<form style="width:650px" id="teaForm" action="">
Grade of tea to add to table: <br />
<input id="gradeBox" size="34" type="text" value="" />
<br />
<input type="button" value="Add"
onclick="addTeaGrade(this.form.gradeBox.value)" />
<input type="reset" />
</form>
<hr />
<h3>Drilling Down Through the DOM (w/X-Ray Vision)</h3>
<script type="text/javascript">
document.write('<ol>')
var elemTbl = document.getElementsByTagName('table')[0].firstChild
document.write('<p>Children of table element:</p>')
while (elemTbl) {
document.write('<li>' + elemTbl.nodeName + '</li>')
elemTbl = elemTbl.nextSibling
}
var elemTBODY = document.getElementsByTagName('TBODY')[0].firstChild
document.write('<p>Children of TBODY element:</p>')
while (elemTBODY) {
document.write('<li>' + elemTBODY.nodeName + '</li>')
elemTBODY = elemTBODY.nextSibling
}
var el = document.getElementById('hdr-row').nextSibling;
document.write('<p>Siblings of hdr-row:</p>')
while (el) {
document.write('<li>' + el.nodeName + '</li>')
el = el.nextSibling
}
document.write('</ol>');
</script>
<hr />
<h3>The Complex Table Model</h3>
The Complex model incorporates all the elements of Simple tables in addition to many new elements that give the author even more organizational control. The Complex model gives the developer the ability to group Table Rows into THEAD, TBODY and TFOOT sections. <br /><br />
The TBODY element is part of a trio of table grouping elements that organize a series of Table Rows [TR] into Header [THEAD], Body [TBODY] and Footer [TFOOT] sections.
<br /><br />
The THEAD and TFOOT section markers are optional, but one or more TBODY sections are always required. <br />
<br />
To allow for backward compatibility with the older Simple Table Model, if no TBODY structures exist in a table, the entire set of row groupings [TR] are assumed to be a single TBODY.
</body>
</html>
I don't see what I am doing wrong I assume it is referencing the wrong nodes? Any help would be great. I'm working on a greasemonkey script that requires me to append a tag before each instance of a tag with a specific class name. It works when there's no parent tags but when it goes into levels deep it doesn't work. So how can I use insertbefore?
Hello everyone, I'm working with the insertBefore method and am having a slight issue that l'm sure is very easy to fix but l can't figure it out. If you look at the following page and click the "add game" button you'll see that extra "game" tables are added to the page. http://www1.theworldlink.com/test/insertBefore.php In the above example the <div id="box_scores"></div> tag is found directly before the closing <body> tag (and l need it inside of a form element). however on this example: http://www1.theworldlink.com/test/insertBefore2.php I have the <div id="box_scores"></div> div inside of a form element as apposed to directly before the closing <body> tag and the script fails to work. Here is the JS code that l'm using: Code: newDiv = document.createElement("div");
newDiv.innerHTML = 'test test test';
my_div = document.getElementById("box_scores");
document.body.insertBefore(newDiv, my_div);
and l'm certain the problem is he document.body.insertBefore(newDiv, my_div); I've tried: document.body.forms[0].insertBefore(newDiv, my_div); and several other varients but l can't figure it out.... any help would be greatly appreciated!!!! I'm brand new to JavaScript, and I come from a purely logical scripting background so forgive me if this is the most poorly formed code/bad technique that you've recently seen. I've played the google games for days and I surrender. I usually find a way to fight through it and figure it out, but I'm going to have to cede this one. I'm simply trying to put a new tab next to a tab that is already present on a page (classed: mirrortab_first) I'm trying to use XPath to select the element and then place newTab before it. Seemed simple enough to start. But as the code sits, the tab always winds up at the bottom of the page. Any thoughts? Kind regards. Code: var newTab = document.createElement("div");
newTab.setAttribute('id','newTab');
newTab.innerHTML =
'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>' +
'<td class="mirrortab_first"> </td>' +
'<td class="mirrortab_back">' +
'<a style="cursor:pointer;">Hide Classifieds</a>' +
'</td>' +
'<td class="mirrortab_last"> </td>' +
'</tr></tbody></table></div>';
var tabLocation = document.evaluate('//td[contains(@class, "mirrortab_first")][1]',document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
for (i=0; i<tabLocation.snapshotLength; i++)
{
tL = tabLocation.snapshotItem(i).parentNode;
}
document.body.insertBefore(newTab, document.tL);
|
|||||||