时间戳

首页 > 解决方案 > 按下按钮更改 div 的内部

javascript - 按下按钮更改 div 的内部

问题描述

我有一个 div，根据我按下的按钮，我在其中放置了一个 html 代码或另一个。

我已经用 helloworld 制作了 addEventListener，当我按下它时，它会完美地放入其中，但是当我尝试放入这个 html 时，应该出现的内容不会出现。

document.querySelector(".grafica-today").addEventListener("click", function() {
    document.querySelector(".grafica-recipiente").innerHTML = "<canvas id='graficaDiaria'><script src='js/graficDiaria.js'></script></canvas>";
});

情况是，如果我输入此代码并输入页面，如果它正确显示在 js 的内部，但是当通过按钮执行此操作时，它不起作用。就好像你放了它，但不执行它（我不知道我是否说清楚了）。

<div class="col-md-9 grafica-recipiente">
     <canvas id="graficaMundial">
          <script src="js/graficaMundial.js"></script>
     </canvas>
</div>

初始代码与我尝试添加的代码相同，但显示正确，但是当我单击按钮时，它不显示。

标签： javascripthtml

解决方案

innerHTML()属性正在为您的<script>元素添加结束标签，即使您已经添加了自己的标签。只需使用一个自关闭标签并在后面附加关闭</canvas>标签，如下所示：

const graficaBtn = document.querySelector('.grafica-today');
const graficaR = document.querySelector('.grafica-recipiente');

graficaBtn.addEventListener('click', function() {
  graficaR.innerHTML = "<canvas id='graficaDiaria'><script src='https://js/graficDiaria.js'/>";
  graficaR.innerHTML += "</canvas>";
});
<button class="grafica-today">Click Me</button>
<div class="col-md-9 grafica-recipiente"></div>

NB检查这个其他StackOverflow 线程以及这个其他StackOverflow 线程，以更深入地解释为什么 innerHTML 尝试添加它自己的结束标签，以及自关闭自定义标签也可能成为问题。

推荐阅读