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

Question

我在我正在制作的网站上有几个部分，我还有其他HTML，我想在按下按钮后更换初始内容。

我以前在教程中使用jQuery和innerHTML / insertAdjacentHTML做过这种事情，但我不太清楚如何将它实现到我自己的代码中。我理解它是如何工作的，但JS不是我的强项，我试图通过解决这些问题来学习更多。

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

这是一个非常基本的CodePen。我已经包含了关于如何在JS领域实现这一点的想法。

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

我知道我可以使用innerHTML甚至insertAdjacentHTML使用常量，但再次，不确定查看我在另一个项目中的现有代码如何实现我写出来的内容。大多数情况下，我无法理解如何将函数调用到视图中（请原谅我的术语）。

实现这一目标的最佳方法是什么？

Answer 1

如果它是与用户交互的按钮，则应使用按钮标记而不是锚标记。这是一个基于您的示例工作的代码：

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

现在，标记变量被硬编码为“asd”，但您可以轻松地为不同的按钮调用具有不同“视图”的changeView函数。

Answer 2

您可以通过几种方式解决这个问题，但最简单的方法就是使用innerHTML并切换内容。

下面的代码不是最简单的方法，但它确实意味着你可以根据你想要切换内容的方式来分解。

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

你可以简单地做：

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

由于您似乎使用了jQuery，我在您的HTML元素（如data-section='2'）中添加了几个属性以将内容链接到每个按钮，您还可以使用像Bootstrap这样的库来为您生成此类菜单。

这是一个简单的解决方案小提琴：JSFiddle