使用innerHTML / insertAdjacentHTML和JS替换Div内容？

Question

I have a couple of sections in a website I am making and I have additional HTML which I would like to swap out the initial content for once a button has been pressed.

I have done this kind of thing using jQuery and innerHTML/insertAdjacentHTML in tutorials before, but I can't quite grasp how to implement it into my own code. I understand how it works but JS is not my strong point and I am trying to learn a bit more about it by tackling these kinds of thing.

<section class="section-web new-section__white section new_section" id="web">

        <div class="row web-btns">
            <div class="col span-2-of-2 ">

                <a class="btn btn-ghost" href="#" target="_blank">Button 1</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 2</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 3</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 4</a>
            </div>
        </div>

 <!-- section (initial) button 1 -->
        <div class="row" id="button-1">
            <div class="col span-1-of-2">
                <h2>Text Button-1</h2>
                <p>Some Text</p>

        </div>

  <!-- section button 2 -->

  <!--
        <div class="row" id="button-2">
            <div class="col span-2-of-3">
               <h2>text Button-2</h2>
                <p>text</p>


            </div>
        </div>
-->

 <!-- section button 3 -->

        <!--
        <div class="row" id="button-3">
            <div class="col span-2-of-2">
                <h2>text Button-3</h2>
                <p>text</p>
            </div>
            </div
-->

 <!-- section button 4 -->

 <!--
    <div class="row" id="button-4">
            <div class="col span-2-of-2">
                <h2>text Button-4</h2>
                <p>text</p>
            </div>

        </div>
-->

    </section>

CSS:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #555;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    margin: 15px;
    letter-spacing: 1px;
  text-align: center;
}

p {
    font-weight: 300;
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
}

a {
    font-size: 15px;
    text-transform: uppercase;
}

.new-section__white {
      padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
}

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 200px;
    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
    -moz-transition: background-color 0.2s, border 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, border 0.2s, color 0.2s;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #000;
    color: #000;
}

.btn-ghost:hover,
.btn-ghost:active {
    box-shadow: 2px 2px 10px #555;
    border: none;
    background-color: #000;
    color: #fff;
}

Here is a really basic CodePen. I have included the idea I have regarding how to achieve this in the JS field.

https://codepen.io/caitlinmooneyx/pen/XQpMNe

I know that I can use innerHTML or even insertAdjacentHTML using a constant, but again, unsure looking at existing code I have in another project how to implement into what I have written out. Mostly I can't understand how to call the function into view (excuse my terminology).

What is the best way to achieve this?

Answer 1

If it is a button that interact with user, you should use button tag not anchor tag. Here is a code that works based on your example:

// button with onclick handler that calls a changeView function.

<div class="row web-btns">
  <div class="col span-2-of-2 ">
    <button onclick="changeView()" type="button" class="btn btn-ghost" href="#" target="_blank">Button 1</button>
  </div>
</div>

// identifier for paragraph tag

<div class="row" id="button-1">
  <div class="col span-1-of-2">
    <h2>Text Button-1</h2>
    <p id="some-text">Some Text</p>
  </div>
</div>

// changeView function implementation

const changeView = (view) => {
  const markup = 'asd';
  const p = document.getElementById('some-text');
  p.innerHTML = markup;
};

Right now markup variable is hardcoded as 'asd' but you can easily call changeView function with different 'view' for different button.

Answer 2

You could approach this in a few ways, but the simplest is just to use innerHTML and switch out the content.

The code below isn't the simplest way to do this, but it does mean that you can break things down depending on how you want to switch up the content.

 const markups = { intro: `<h1>This is the intro</h1>`, summary: `<p>This is the summary</p>`, }; const getMarkupSwitcher = markupData => element => markupToUse => element.innerHTML = markupData[markupToUse] const markupSwitcher = getMarkupSwitcher(markups) const switchMainDiv = markupSwitcher(document.getElementById('main')) switchMainDiv('intro') 

 <button onclick="switchMainDiv('intro')">Intro</button> <button onclick="switchMainDiv('summary')">Summary</button> <div id="main"></div> 

Answer 3

You can simply do:

$( document ).ready(function() {
  $('.btn').on('click', (event) => {
    $('.content-section').hide();
    let section = $(event.target).data('section');
    $(`.section-${section}`).show();
  })
});

Since you seem to be using jQuery, i added a couple of properties to your HTML elements like data-section='2' to link the content to each button, you can also use libraries like Bootstrap that will generate this kind of menus for you.

Here is a fiddle with a simple solution: JSFiddle