onClick replace javascript element, with new javascript element

Question

What I am trying to figure out is how to make a button, that when you click, will replace itself with a textbox. I found this code on the W3Schools website, and can't figure out how to put javascript (or HTML) elements in.

<p>Click the button to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<p id="demo">Visit Microsoft!</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("Microsoft", "W3Schools");
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>
<input type="text" name="textbox" value="textbox"><br>

In the end I want to be able to replace a button with the textbox I put outside the html tags

"In the end I want to be able to replace a button with the button I put outside the html tags" That's the wrong approach. Either use a string containing HTML or better, create a new DOM element and use DOM manipulation methods to insert that element. See quirksmode.org/dom/intro.html for an introduction. — Felix Kling
– Felix Kling, Commented May 28, 2014 at 23:19

Luke · Accepted Answer · 2014-05-28 23:29:07Z

3

I would not suggest you the innerHTML replacement method.

Here are the steps where you can use replaceChild

Get the parent node of the selected element
use replaceChild

Here the code

// create the new element (input)
var textBox = document.createElement("input");
textBox.type = "text";

// get the button
var button = document.getElementById("demo");
// reference to the parent node
var parent = element.parentNode;
// replace it
parent.replaceChild(textBox, button);

On older browser you probably need a slighlty different solution.

var parent = button.parentNode;
var next = button.nextSibling;
// remove the old
parent.removeChild(button);
// if it was not last element, use insertBefore
if (next) {
   parent.insertBefore(textBox, next);
} else {
   parent.appendChild(textBox);
}

edited May 28, 2014 at 23:29

answered May 28, 2014 at 23:14

Luke

8,4173 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thomas Over a year ago

Sounds like what your saying might work but could you put it in jsfiddle or in a comment for me, I'm still a beginner and don't know how to do what your explaining yet.

Felix Kling Over a year ago

You should probably show how exactly the input is created (instead of using createTextBox).

Luke Over a year ago

@Thomas feel free to try the suggested code and let me know if it worked for you.

Thomas Over a year ago

@Luke in the first one I'm not sure where to put the "reference to the parent node", and the "replace it". and In the one for older browsers I don't know where any of it goes

Luke Over a year ago

what do you mean with "where it goes"? in you function obviously. Its the same as your other code but using node replacing.

Thomas · Accepted Answer · 2014-05-29 19:47:27Z

-1

I ended up finding a code that works off of http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript

answered May 29, 2014 at 19:47

Thomas

431 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

onClick replace javascript element, with new javascript element

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related