SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    FBI secret agent digitman's Avatar
    Join Date
    Sep 2004
    Location
    Work
    Posts
    697
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Adding a textbox to a div?

    Suppose I have this code:
    Code:
    <div id="nameDiv">
    Your name is <b>Bob</b>.
    <a href="javascript:null();">
    Change
    </a>
    </div>
    When someone clicks the link saying "Change", I want javascript to replace the message inside the div with a textbox that contains 'Bob' and a button that says 'Save'.

    How do I go about adding that textbox and button to the div without fiddling around with the innerHTML? Is there any createElement(), appendChild(), etc trick I can use here?

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    And why innerHTML is wrong? Wrap your message into a <span> and change it using innerHTML.
    Saul

  3. #3
    FBI secret agent digitman's Avatar
    Join Date
    Sep 2004
    Location
    Work
    Posts
    697
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1- Can innerHTML be used with spans?
    2- OK innerHTML would be ok but i'm just trying to learn how to do it with dom. Any ideas?

  4. #4
    @php.net Salathe's Avatar
    Join Date
    Dec 2004
    Location
    Edinburgh
    Posts
    1,397
    Mentioned
    64 Post(s)
    Tagged
    0 Thread(s)
    You might like to try something along the lines of the following. Note, this is just to give you ideas and shouldn't be relied on to a) work and b) work well.

    Code:
    var divTemplate = '';
    function changeToTextbox(elemid) {
    	var elem = document.getElementById(elemid);
    	if (elem) {
    		var nameelem = elem.getElementsByTagName("b")[0];
    		if (nameelem) {
    			var name = nameelem.firstChild.nodeValue;
    			divTemplate = elem.cloneNode(true);
    			var newDiv = document.createElement("div");
    			newDiv.id = elem.id;
    			var newText = document.createElement("textarea");
    			newText.value = name;
    			var newDone = document.createElement("button");
    			newDone.appendChild(document.createTextNode("Done!"));
    			newDone.onclick = function() { changeToDiv(elemid); }
    			newDiv.appendChild(newText);
    			newDiv.appendChild(newDone);
    			elem.parentNode.replaceChild(newDiv, elem);
    			elem = null;
    		}
    	}
    }
    function changeToDiv(elemid) {
    	var elem = document.getElementById(elemid);
    	if (elem) {
    		var tarea = elem.getElementsByTagName("textarea")[0];
    		if (tarea) {
    			var name = tarea.value;
    			name.replace('<', '&lt;').replace('>', '&gt;');
    			var newb = document.createElement("b");
    			newb.appendChild(document.createTextNode(name));
    			var b = divTemplate.getElementsByTagName("b")[0];
    			if (b) { b.parentNode.replaceChild(newb, b); }
    			elem.parentNode.replaceChild(divTemplate, elem);
    			elem = null;
    		}
    	}
    }
    And change your hyperlink to something like:
    Code:
    <a href="#change" onclick="changeToTextbox('nameDiv'); return false;">Change</a>
    - Salathe

  5. #5
    FBI secret agent digitman's Avatar
    Join Date
    Sep 2004
    Location
    Work
    Posts
    697
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey salathe,
    thanks a lot for that. Now if only you could explain whats going on..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •