我怎样才能重复功能来放置另一个innerHTML？

Posted 2023-02-22

【中文标题】我怎样才能重复功能来放置另一个innerHTML？

【英文标题】：How can I repeat function to put another innerHTML?

【发布时间】：2017-09-27 09:34:44

【问题描述】：

单击某些内容后，我想在 html 中创建 div 部分，但它只发生一次，如果我再次单击，它什么也不做。可能是非常基础的事情，但我只是初学者。

document.getElementById("plusvideo").onclick = function gkHaj() 
  var fdsf = 2;
  var text = document.getElementById("leftsidesd").innerHTML;
  var i = 1;
  if (fdsf == 2) 
    document.getElementById("leftsidesd").innerHTML = document.getElementById("leftsidesd").innerHTML + '<div class="episesnig">Episode 1 <input type="text" class="linkkepiz" placeholder="Link"></div>';
   else 

<div id="leftsidesd">

  <div class="episernig">Series 01</div>
  <div id="plusvideo">+video</div>
  <div class="episesnig">Episode 1 <input type="text" class="linkkepiz" placeholder="Link"></div>

</div>

好吧，这段代码中有些东西可能没用，但正如我所说，我点击 plusvideo，然后它工作，然后我再次点击，不再工作，我应该放什么代码或做什么。请在这里帮助这个可怜的初学者:'(

【参考方案1】：

因为

document.getElementById("leftsidesd").innerHTML = document.getElementById("leftsidesd").innerHTML + '<div class="episesnig">Episode 1 <input type="text" class="linkkepiz" placeholder="Link"></div>';

附加到plusvideo 的事件侦听器不再存在，因为 HTML 被修改并删除了旧元素。所以它不止一次起作用。

var fdsf = 2;

document.getElementById("plusvideo").onclick = function gkHaj() 
  var mydiv = document.createElement('div');
  mydiv.setAttribute('class', 'episesnig');
  mydiv.innerHTML = 'Episode ' + fdsf + '<input type="text" class="linkkepiz" placeholder="Link">';
  fdsf++;
  document.getElementById("leftsidesd").appendChild(mydiv);

<div id="leftsidesd">
  <div class="episernig">Series 01</div>
  <div id="plusvideo">+video</div>
  <div class="episesnig">Episode 1 <input type="text" class="linkkepiz" placeholder="Link"></div>

</div>

【参考方案2】：

试试这个：

var i = 1;
            $('#plusvideo').click(function () 
                $('#leftsidesd').append('<div class="episesnig">Episode ' + i + ' <input type="text" class="linkkepiz" placeholder="Link"></div>')
                i++;
            );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftsidesd">

    <div class="episernig">Series 01</div><div id="plusvideo">+video</div>

</div>

:)

【讨论】：

我很想知道为什么 OP 代码在第二次点击时不起作用

我认为是因为添加新 DIV 后更改了 DOM