Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

Question

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

I am working on creating a feature on a webpage where clicking a button will change the HTML code inside a specific div. Essentially, I want to be able to update the content of a div by simply clicking a link.

Here are two different sets of HTML code:

Code Example One (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>

Code Example Two (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 Anniversary 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>

View an example of the code here

Please provide a detailed explanation as I am unfamiliar with how to achieve this. Additionally, I would prefer to accomplish this using only JavaScript, without the use of jQuery.

javascript html css

Answer 1

Answer №1

To start, you need to uncomment the following code snippet so it appears on the page:

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

Then, use CSS to hide it:

#contentNEW { display: none; }

Next, incorporate the following code into your newVids() function:

function newVids() {
  // identify the target div for modification
  var div = document.getElementById('contentPOP');
  // update its content with the hidden div's content
  div.innerHTML = document.getElementById('contentNEW').innerHTML;
}

This approach may not be the most efficient way to accomplish your goal. Instead of toggling visibility, consider swapping one div out for another.

Answer 2

To start, you need to uncomment the following code snippet so it appears on the page:

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

Then, use CSS to hide it:

#contentNEW { display: none; }

Next, incorporate the following code into your newVids() function:

function newVids() {
  // identify the target div for modification
  var div = document.getElementById('contentPOP');
  // update its content with the hidden div's content
  div.innerHTML = document.getElementById('contentNEW').innerHTML;
}

This approach may not be the most efficient way to accomplish your goal. Instead of toggling visibility, consider swapping one div out for another.

Answer 3

Answer №2

If you want to easily toggle between two chunks of code, simply wrap each one in its own div with unique IDs and use jQuery to target them. One of the divs should initially have a "display:hidden" class, which can be toggled on and off with ease.

For an example, check out THIS LINK!!!

Wishing you good luck as you implement this solution!

HTML

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

CSS

.hidden{
   display:none;
}

JS

$(document).ready(function(){
   $("button").click(function(){
       $("#hidden-paragraph").toggle();
   });
});

Answer 4

If you want to easily toggle between two chunks of code, simply wrap each one in its own div with unique IDs and use jQuery to target them. One of the divs should initially have a "display:hidden" class, which can be toggled on and off with ease.

For an example, check out THIS LINK!!!

Wishing you good luck as you implement this solution!

HTML

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

CSS

.hidden{
   display:none;
}

JS

$(document).ready(function(){
   $("button").click(function(){
       $("#hidden-paragraph").toggle();
   });
});

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

Answer №1

Answer №2

Similar questions

Top tip for combating form misuse in Django applications

Is there a way to transfer gulp.watch() to a pipe?

Triggering an event from a component to its parent module resulting in an exception situation

"Receiving a 404 error when sending a POST request, but getting

Attempting to populate HTML content retrieved from my MySQL database

Downloading multiple files on both iOS and Android devices

Tips for resolving the error "Parsing near 'Unexpected end of JSON input while parsing...' for...'mocha':'^3.2.0','s'":

Adjust background image size to fit the screen, not just the content

Sending documents to a printer directly from a Rails application

FadeOut/FadeIn Iframe Animation

Enhancing the appearance of each letter within a word

Set iframe or form to be in a fixed position

Tips for aligning thumbnail text to the right on a small viewport with Bootstrap

Rotate a div using CSS by 10 degrees while spanning the full width

Create a list of items with checkboxes next to each that can be repeated using PdfMake

How to loop through a list variable using Razor syntax in an HTML document

Switch color in Material-UI based on props

How can you stop VueUse useStorage from filling localStorage again after clearing it?

Every time I launch my express application, I encounter this error message

Access a file from a specified route within Express