blocks|key|4414624|text|将字符串传入您的方法并获取另一个div|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414625|​|4414626|<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>|code-block|syntax|javascript|4414627|4414628|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Pass strings into your method and get the other div</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main_place"&gt;
  main
&lt;/div&gt;

&lt;button onclick="show('operation1')"&gt;Replace to operation 1&lt;/button&gt;
&lt;button onclick="show('operation2')"&gt;Replace to operation 2&lt;/button&gt;
&lt;button onclick="show('operation3')"&gt;Replace to operation 3&lt;/button&gt;


&lt;div id=operation1 style=“display:none”&gt;
  Some textboxes and text
&lt;/div&gt;

&lt;div id=operation2 style=“display:none”&gt;
  Again some textboxes and text
&lt;/div&gt;

&lt;div id=operation3 style=“display:none”&gt;
  And again some textboxes and text
&lt;/div&gt;

&lt;script&gt;
  function show(param_div_id) {
    document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML;
  }
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4414691|text|只需将HTML内容分配给一个字符串(手动编写或从另一个html元素(模板)获取)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414692|​|4414693|window.onload+=+function()+{
++document.getElementById("to_be_replaced").innerHTML+=+"<span>+My+Production+Text+</span>";
}|code-block|syntax|javascript|4414694|div+>+span+{
++font-weigth:+bold;
++color:+red;
++}|4414695|<div+id="to_be_replaced">
++Lorem+ipsum...
</div>|4414696|4414697|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
  document.getElementById("to_be_replaced").innerHTML = "&lt;span&gt; My Production Text &lt;/span&gt;";
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div &gt; span {
  font-weigth: bold;
  color: red;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="to_be_replaced"&gt;
  Lorem ipsum...
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4414684|text|像这样编辑你的javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414685|function+show(param_div_id){
++++document.getElementById('main_place').innerHTML+=+document.getElementById(param_div_id).textContent;
}|code-block|syntax|javascript|4414686|另外，将参数放在单引号内，如下所示：|4414687|<button+onclick="show('operation1')">|4414688|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Edit your javascript like this:</p>

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

<p><br>
And also, put your parameters inside single-quotes like this:</p>

<pre><code>&lt;button onclick="show('operation1')"&gt;
</code></pre>


blocks|key|4414733|text|我认为ndugger是正确的，你应该使用像删除/冒号之类的东西，或者在jquery中使用.remove()和append()而不是innerhtml。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414734|根据这个问题，在stackoverflow和其他站点中，最好使用append()而不是html()或innerHTML。|4414735|"innerHTML+%2B=+..."+vs+"appendChild(txtNode)"|offset|length|4414736|您的代码可以是这样的。|4414737|++++++++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);
++++++++}|code-block|syntax|javascript|4414738|++++<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>|4414739|​|4414740|您还可以使用|4414741|document.getElementById("idOfDIv").addEventListener("click",+function+()+{
++++yourfunction();
++++secondfunction();
})|4414742|或者这个|4414743|document.getElementById("idOfDIv").onclick+=+yourfunction();|4414744|而不是在HTML+onclick事件属性中|4414745|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode^0|0|0|0|18|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@$F|1D|G|1E|1|1F]]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

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

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

<p><a href="https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode">&quot;innerHTML += ...&quot; vs &quot;appendChild(txtNode)&quot;</a></p>

<p>your code can be like this. 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>        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);
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="main_place"&gt;
        main
    &lt;/div&gt;

    &lt;button onclick="swapContent('operation1')"&gt;Replace to operation 1&lt;/button&gt;
    &lt;button onclick="swapContent('operation2')"&gt;Replace to operation 2&lt;/button&gt;
    &lt;button onclick="swapContent('operation3')"&gt;Replace to operation 3&lt;/button&gt;

    &lt;div id="complete" style="display:none;"&gt;
        &lt;div id="operation1"&gt;
            Some textboxes and text
        &lt;/div&gt;

        &lt;div id="operation2"&gt;
            Again some textboxes and text
        &lt;/div&gt;

        &lt;div id="operation3"&gt;
            And again some textboxes and text
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>also you can use </p>

<pre><code>document.getElementById("idOfDIv").addEventListener("click", function () {
    yourfunction();
    secondfunction();
})
</code></pre>

<p>or this </p>

<pre><code>document.getElementById("idOfDIv").onclick = yourfunction();
</code></pre>

<p>instead of inside HTML onclick Event Attribute</p>


blocks|key|4414806|text|我用这个表单替换了我的div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414807|<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>|code-block|syntax|javascript|4414808|和JS：|4414809|function+newDivHere()+{
document.getElementById("oldDiv").style.display="none";
document.getElementById("newDiv").style.display="block";
}|4414810|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>i used this form for replace my divs. </p>

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

<p>and JS:</p>

<pre><code>function newDivHere() {
document.getElementById("oldDiv").style.display="none";
document.getElementById("newDiv").style.display="block";
}
</code></pre>


blocks|key|4414795|text|试着这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4414796|document.querySelector('#maincontent').outerHTML+=+jsonResponse.main；|4414797|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Try like this</p>
<p>document.querySelector('#maincontent').outerHTML = jsonResponse.main;</p>


<p>How to replace div with another div in javascript? </p>

<p>This is what I have:</p>

<pre><code>&lt;div id="main_place"&gt;
main
&lt;/div&gt;

&lt;button onclick="show(operation1)"&gt;Replace to operation 1&lt;/button&gt;
&lt;button onclick="show(operation2)"&gt;Replace to operation 2&lt;/button&gt;
&lt;button onclick="show(operation3)"&gt;Replace to operation 3&lt;/button&gt;


&lt;div id=operation1 style=“display:none”&gt;
Some textboxes and text
&lt;/div&gt;

&lt;div id=operation2 style=“display:none”&gt;
Again some textboxes and text
&lt;/div&gt;

&lt;div id=operation3 style=“display:none”&gt;
And again some textboxes and text
&lt;/div&gt;

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

<p>Is it even possible to do it without jquery?</p>


How to replace div with another div in javascript?

如何在javascript中用另一个div替换div？这就是我所拥有的：<div id="main_place">main</div><button onclick="show(operation1)">Replace to operation 1</button><button onclick="show(opera...

问如何在javascript中用另一个div替换div？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript中用另一个div替换div？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript中用另一个div替换div？
EN