Question

所以我有这段代码

spellNumber = 0

function createSpell() {
  document.getElementById("spells").innerHTML +=
    '<p><input type="text"></p><br />'
  spellNumber += 1;
  spellsActive = true
}

<a onClick="createSpell()" class="spellButton" style="background-color:#717171">Add a Spell</a>
<div id="spells"></div>

但是每当我尝试通过单击按钮添加另一个输入时，它都会擦除以前的所有输入。我该如何阻止这种情况的发生？

Answer 1

与现有function errorHandler($errno, $errstr) { echo "Error: [$errno] $errstr"; header('Location: https://test.com/login/display/error_message.php'); } //First do some other php/mysql operations here $html = file_get_html($website); foreach($html->find('a[href!=#]') as $element) { Do several things here } //Then finish up with some additional php/mysql operations here并置将意味着仅保留先前元素的 HTML字符串-您的.innerHTML没有input 属性，因此似乎丢失了这些值。（实际上发生的是该元素被破坏，然后使用新的完整HTML字符串重新创建。）

请不要使用现有的.value，而应使用innerHTML，以免破坏容器中已经存在的内容：

createElement

let spellNumber = 0;
const spells = document.getElementById("spells")

function createSpell() {
  const p = spells.appendChild(document.createElement('p'));
  const input  = p.appendChild(document.createElement('input'));
  spells.appendChild(document.createElement('br'));
  spellNumber += 1;
  spellsActive = true
}

另一种选择是使用<a onClick="createSpell()" class="spellButton" style="background-color:#717171">Add a Spell</a> <div id="spells"></div>，它像insertAdjacentHTML一样，不会破坏现有元素：

appendChild

let spellNumber = 0;
const spells = document.getElementById("spells")

function createSpell() {
  spells.insertAdjacentHTML('beforeend', '<p><input type="text"></input></p></br>');
  spellNumber += 1;
  spellsActive = true
}

用JS追加新输入会擦除以前的输入

1 个答案: