Thanks again, I got it working in IE but not FF now... It adds the div as a child to abc, changes the className, but the style changes don't show up (In FF, it works fine in IE).The problem is that you’re using the name className via setAttribute in an attempt to reference the attribute class. This works fine in Internet Explorer due to a bug; it will not work in standards‐compliant browsers, however. You have two options here: (A) split the script into standards‐compliant and Internet Explorer‐only versions or (B) use the shorthand, which Internet Explorer handles correctly.
Method A
<!-->-->
<script type="application/ecmascript">
element.setAttribute("class", value);
</script>
<!--<![endif]>-->
<!--[if !IE]>-->
<script type="text/javascript">
// technically correct
element.className = value);
// technically incorrect, but allows use of the setAttribute method
element.setAttribute("className", value);
</script>
<!--<![endif]>-->
Method B
<script type="text/javascript">
element.className = value);
</script>
I, personally, use method A, which utilizes Microsoft conditional comments (http://www.quirksmode.org/css/condcom.html), although it’s a bit wasteful in this particular example.
I just realized I may have a bit of a problem in the future... The purpose of all this is to be able to create divs using data received from AJAX, and to prevent users from flooding the server with requests if they already have the information in memory... Users will need to be able to call these functions (below) on a regular basis for several different reasons, and thus - spawn several different divs.
The problem I see is - how will I be able to spawn, track, and delete these with a unique ID? (Var element, AND setAttribute id)
function dom_test() {
var element = document.createElement("div"); // create
element.setAttribute("id", "elementId"); // assign id attribute
element.setAttribute("className", "test");
document.getElementById("abc").appendChild(element);
}
function dom_delete() {
document.getElementById("a").removeChild(element); // remove
delete element; // deletes the element
}
[i](Dom delete was just created as an example of this problem)
I was thinking about the other parts of the script sending the unique id through the function as a var, but I have no idea how to use a variable as a variable name... Like, instead of var element - using var (Var from function()).
Its possible in PHP, but is it possible in JS? Whats the best way to go about doing this?I know JavaScript and XML, but not AJAX. I’m not sure what you mean, but a guess is shown below.
function dom_test() {
var element = document.createElement("div"); // create
element.setAttribute("id", "elementId"); // assign id attribute
element.setAttribute("class", "test");
document.getElementById("abc").appendChild(element);
}
function dom_delete(elementId) {
var element = document.getElementById(elementId);
element.parentNode.removeChild(element); // remove
delete element; // deletes the element
}
dom_delete("elementId");
Edit #2:
Is there a way to move a div before, and after another div? Such as:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
If I want to move 3 up one on every mouse click of a link, or 1 down every mouse click.
I know I can just make a table, or something along those lines - but it'd be nice if there was another way.Just FYI, ID names are not allowed to start with a number.
I’ve thought about it some and I’m not sure exactly how one would do it without making the code too specific. I’m thinking that some combinations of some of previousSibling, replaceChild, cloneNode, removeNode, and insertBefore ought to be able to do this. One of the problems is accounting for white‐space text nodes between the div elements. Then again, there should be no such nodes if all of those div elements are dynamically generated; that would make things easier, since one would be able to use previousSibling directly:
if (element.previousSibling) {
var sibling = document.getElementById(element.previousSibling.getAttribute("id"));
sibling.parentNode.insertBefore(sibling.parentNode.removeChild(element), sibling);
}I’m not sure if the above would work though, since sibling might cease to exist the moment you remove element. One could use element.cloneNode(true) and subsequently remove element, but that would temporarily invalidate the document and might cause issues since there would be two elements with the same ID in the document simultaneously.
I guess I’ll have to research this further.
if (element.previousSibling) {
var sibling = document.getElementById(element.previousSibling.getAttribute("id"));
sibling.parentNode.insertBefore(sibling.parentNode.removeChild(element), sibling);
}
And on a related note, if there IS a way to do this, would the divs switch place (2 and 3 switching places, for instance), or would there be a gap where 3 used to be?You could make a script do either.