Как заменить HTML на другой фрагмент HTML, используя JS

Question

, поэтому я пытаюсь создать страницу, на которой я нажимаю кнопку, и код HTML соответствующего раздела изменяется. По сути, я хочу, чтобы иметь возможность щелкнуть ссылку, а мой код внутри изменений div.

Вот два различных HTML коды:

номер один: (ID = contentPOP)

<div id="contentPOP"> 
      <h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3> 
      <iframe width="500" height="300"  
        src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen> </iframe> 
       <br> 
      <h3>Remembering Steve Jobs</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"  
        frameborder="0" allowfullscreen></iframe> 
     </div> 

номер два (ID = "contentNEW")

<div id="contentNEW"> 
      <h3>Slow Motion War!</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen></iframe> 
      <br> 
      <h3>1 Year Aniversary of Teddy Bear Productions!</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen></iframe> 
     </div> 

Here is an example of all the code

ПРИМЕЧАНИЕ: Я не знаю, как это сделать, поэтому подробное объяснение будет очень полезным FUL. Кроме того, я хочу иметь возможность делать это только с JS, нет JQuery

Answer 1

Слушайте, это делается очень легко. Оберните оба фрагмента кода внутри своих собственных div и дайте им уникальные идентификаторы, чтобы вы могли настроить их в jquery. Inittialy hidden, будет иметь класс display:hidden, а затем вы можете использовать переключатель для переключения. Легко!

HERE IS AN EXAMPLE!!!

Успехов!

HTML

<p>This is a paragraph.</p> 
<p class="hidden">This is a second paragraph.</p> 
<button>Toggle </button> 

CSS

.hidden{ 
    display:none; 
    } 

JS

$(document).ready(function(){ 
$("button").click(function(){ 
    $("p").toggle(); 
    }); 
}); 

Answer 2

Во-первых, раскомментируйте следующее поэтому существует на странице:

<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE 
<div id="contentNEW"> 
    ... 
</div> 
--> 

И вместо того, чтобы скрыть его с помощью CSS:

#contentNEW { display: none; } 

Затем добавьте следующие строки в newVids() функции:

function newVids() { 
    // target the div you want to change 
    var div = document.getElementById('contentPOP'); 
    // replace its innerHTML with the innerHTML of the hidden div 
    div.innerHTML = document.getElementById('contentNEW').innerHTML; 
} 

Это действительно плохой способ пойти о том, что вы пытаетесь сделать , Вы не должны думать о переключении видимости каждого div, вместо того, чтобы заменять один на другой.