Как заменить div другим div в javascript?

Question

Как заменить div другим div в javascript?

Это то, что у меня есть:

<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> 

Возможно ли это сделать без JQuery?

Answer 1

Пасс строки в ваш метод и получить другой 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>

Answer 2

просто присвоить содержимое HTML в строку (вручную или письменного извлеченной из другого HTML элемента (шаблон)):

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>

Answer 3

Мне не очень приятно, что я должен ответить на этот вопрос из-за предыдущих ответов, увековечивающих плохую практику, но здесь мы идем.

Лучший способ сделать это было бы не использования innerHTML, из-за possible unforseen side effects. Лучший способ сделать это был бы:

• Первого клона желаемого сОн
• второго пустого основной сНу
• Третьего добавить клон в основной DIV

Это будет выглядеть очень так же, как следующее:

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); 
} 

не позволяйте себе попасть в многочисленные ловушки с помощью innerHTML; клонирование узла имеет гораздо больше шансов сделать именно то, что вы ожидаете от него.

Некоторые проблемы с innerHTML состоят в том, что он копирует только HTML, а не DOM, что означает, что вы не копируете ничего на этом узле DOM, например, прослушиватели событий, свойства (например, значение) и т. Д. Клонирование node (и его дочерние элементы) клонирует этот узел DOM, который клонирует его свойства соответственно.

Также считается плохой практикой (по большей части) использовать встроенные обработчики событий на вашем HTML; разделение проблем!

Answer 4

Корректировать Javascript так:

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

А также положить ваши параметры в одинарные кавычки, как это:

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

Answer 5

я думаю ndugger это правильно, и вы должны использовать что-то вроде delete/colon или в jquery .remove() и append() вместо innerhtml.

в соответствии с этим вопросом в stackoverflow и других сайтах всегда лучше использовать append() вместо html() или innerHTML.

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

ваш код может быть.

 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>

также вы можете использовать

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

или это

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

вместо внутри HTML OnClick событие Атрибут