Infinite divs/items?

I might be overlooking something, but this is what I want to do:

Have a button or drop down option, that spawns or creates a new div which has more options of it's own.

I've seen and can make stuff like:
Change the number of options inside a subsequent drop down with a drop down choice
http://www.quirksmode.org/js/options.html#support

And also it's easy to make 100 divs or select option lists HIDDEN and then reveal them one by one pretending to "add" them.

But, what about spawning, or basically writing HTML on the fly?

Doable?

Trying to really understand the max capability of JS and move into Ajax(yeah, I know hated buzzword) stuff.

Well... I don't know JS that well, but I suppose you could just do this...

Code:

---

var newdiv;
newdiv = '<div>' + divcontent + '</div>';
var divcontent;
divcontent = '<input type="button" onClick="this.innerText = this.innerText + divcontent2">';

---

Seems like it could work out alright. Untested. Also... serves no real purpose. ...just makes a ton of divs.


EDIT: Well... since I don't know JS that well, I can't finish the code. I was testing it an realized I just messed up putting 'this' which would refer to the button, not the div. So.... this.parentdiv would be great, but I don't know what the right code is to select that. Perhaps someone else can suggest something.

Quote:

---

Ajax(yeah, I know hated buzzword)

---

It's not hated so much as misleading. AJAX stands for Asynchronous Javascript And XML. However, many scripts labelled "AJAX" (like the "AJAX Content" script here on DD) are neither asynchronous nor XML-based.

Quote:

---

But, what about spawning, or basically writing HTML on the fly?

Doable?

---

Certainly. Don't use innerHTML as the start of djr33's script suggested he was about to do, though: this will erase the contents of all existing elements in the form, as well as wiping out their event handlers. Instead, use the DOM methods:

Code:

---

function addDivToForm(frm) {
  var d = document.createElement("div");
  d.style.border = "3px solid red";
  frm.appendChild(d);
}

---

Quote:

---

Originally Posted by Twey

It's not hated so much as misleading. AJAX stands for Asynchronous Javascript And XML. However, many scripts labelled "AJAX" (like the "AJAX Content" script here on DD) are neither asynchronous nor XML-based.Certainly. Don't use innerHTML as the start of djr33's script suggested he was about to do, though: this will erase the contents of all existing elements in the form, as well as wiping out their event handlers. Instead, use the DOM methods:

Code:

---

function addDivToForm(frm) {
  var d = document.createElement("div");
  d.style.border = "3px solid red";
  frm.appendChild(d);
}

---

---

that looks hot

thanks, I'll test this out

I'm intent on making some sort of totally interactive demonstration, that doesn't necessarily refresh or use the database much. I think it's the future and have seen some crazy examples, check this example out I found:

http://www.propeller-head.biz/demo/desktop/

Note: Listen to twey. Mine was a stab in the dark that was at least somewhat well guessed... it almost worked :p

I hope the solution works for you.

Quote:

---

I'm intent on making some sort of totally interactive demonstration, that doesn't necessarily refresh or use the database much. I think it's the future and have seen some crazy examples, check this example out I found:

---

Also check out http://eyeos.org/. However, do provide plain server-side fallbacks wherever possible.