How to replace div with another div in javascript?

This is what I have:

<div id="main_place">
main
</div>

<button onclick="show(operation1)">Replace to operation 1</button>
<button onclick="show(operation2)">Replace to operation 2</button>
<button onclick="show(operation3)">Replace to operation 3</button>


<div id=operation1 style=“display:none”>
Some textboxes and text
</div>

<div id=operation2 style=“display:none”>
Again some textboxes and text
</div>

<div id=operation3 style=“display:none”>
And again some textboxes and text
</div>

<script>
function show(param_div_id){
        document.getElementById('main_place').innerHTML = Here should be div from param;
        }
</script>

Is it even possible to do it without jquery?

How to replace div with another div in javascript?

This is what I have:

<div id="main_place">
main
</div>

<button onclick="show(operation1)">Replace to operation 1</button>
<button onclick="show(operation2)">Replace to operation 2</button>
<button onclick="show(operation3)">Replace to operation 3</button>


<div id=operation1 style=“display:none”>
Some textboxes and text
</div>

<div id=operation2 style=“display:none”>
Again some textboxes and text
</div>

<div id=operation3 style=“display:none”>
And again some textboxes and text
</div>

<script>
function show(param_div_id){
        document.getElementById('main_place').innerHTML = Here should be div from param;
        }
</script>

Is it even possible to do it without jquery?

• javascript
• html

• 9 "Is it even possible to do it without jquery?" jQuery is nothing but JavaScript... Anything that can be done with jQuery can be done without it. – blex Commented May 20, 2016 at 13:15
• Yes i know it but i'd like to use raw JavaScript – DiPix Commented May 20, 2016 at 13:17
• developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild Please actually try to google next time. – ndugger Commented May 20, 2016 at 13:21
• jsfiddle.net/shvf1r42 - is this what you want to or do you want to replace the new div with main_place? – messerbill Commented May 20, 2016 at 13:22

7 Answers 7

Pass strings into your method and get the other div

<div id="main_place">
  main
</div>

<button onclick="show('operation1')">Replace to operation 1</button>
<button onclick="show('operation2')">Replace to operation 2</button>
<button onclick="show('operation3')">Replace to operation 3</button>


<div id=operation1 style=“display:none”>
  Some textboxes and text
</div>

<div id=operation2 style=“display:none”>
  Again some textboxes and text
</div>

<div id=operation3 style=“display:none”>
  And again some textboxes and text
</div>

<script>
  function show(param_div_id) {
    document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML;
  }
</script>

2019 Update:

child.replaceWith(newElement);

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

In the specific case of this question, I would recommend using replaceWith with a clone of the node OP wishes to swap in. This could look like:

const main = document.getElementById('main');
const original = document.getElementByid('operation1');
const clone = original.cloneNode(true);

main.replaceWith(clone);

This would probably present an issue the next time you go to swap the element, but you could adapt this solution to fit your needs.

Original Post:

The best way to do this would be to not use innerHTML, due to possible unforseen side effects. The best way to do this would be to:

• First clone the desired div
• Second empty the main div
• Third append the clone into the main div

This would look very much like the following:

function swapContent (id) {
    const main = document.getElementById('main');
    const div = document.getElementById(id);
    const clone = div.cloneNode(true);

    while (main.firstChild) main.firstChild.remove();

    main.appendChild(clone);
}

Do not allow yourself to fall into the many pitfalls of using innerHTML; cloning a node has a much better chance of doing exactly what you're expecting it to do.

Some of the problems with innerHTML are that it only copies the HTML, and not the DOM, meaning that you do not copy over anything on that DOM node, like event listeners, properties (like value), etc. Cloning a node (and its children) clone that DOM node, which clones its properties respectively.

It is also considered poor practice (by most) to use inline event handlers on your HTML; separation of concerns!

i used this form for replace my divs.

<div id="newDiv" class="here" style="display: none" > content</div>
<div id="oldDiv" class="here" style="display: block"> content</div>
<button type="button" onclick="newDivHere()">replace</button>

and JS:

function newDivHere() {
document.getElementById("oldDiv").style.display="none";
document.getElementById("newDiv").style.display="block";
}

Edit your javascript like this:

function show(param_div_id){
    document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).textContent;
}

And also, put your parameters inside single-quotes like this:

<button onclick="show('operation1')">

Try like this

document.querySelector('#maincontent').outerHTML = jsonResponse.main;

just assign the HTML content to a string (manually written or fetched from another html element (template)):

window.onload = function() {
  document.getElementById("to_be_replaced").innerHTML = "<span> My Production Text </span>";
}

div > span {
  font-weigth: bold;
  color: red;
  }

<div id="to_be_replaced">
  Lorem ipsum...
</div>

i think ndugger is right and you should use something like delete/colon or in jquery .remove() and append() instead of innerhtml.

according to this question in stackoverflow and other sites always better use append() instead of html() or innerHTML.

"innerHTML += ..." vs "appendChild(txtNode)"

your code can be like this.

        function swapContent(id) {
            const main = document.getElementById('main_place');
            const div = document.getElementById(id);
            const clone = div.cloneNode(true);

            while (main.firstChild) main.firstChild.remove();

            main.appendChild(clone);
        }

    <div id="main_place">
        main
    </div>

    <button onclick="swapContent('operation1')">Replace to operation 1</button>
    <button onclick="swapContent('operation2')">Replace to operation 2</button>
    <button onclick="swapContent('operation3')">Replace to operation 3</button>

    <div id="complete" style="display:none;">
        <div id="operation1">
            Some textboxes and text
        </div>

        <div id="operation2">
            Again some textboxes and text
        </div>

        <div id="operation3">
            And again some textboxes and text
        </div>
    </div>

also you can use

document.getElementById("idOfDIv").addEventListener("click", function () {
    yourfunction();
    secondfunction();
})

or this

document.getElementById("idOfDIv").onclick = yourfunction();

instead of inside HTML onclick Event Attribute