Question

我有两个div，它们收集字符串和数字。我该怎么做才能在我的div中添加多个元素？

let button = document.querySelector('.buttonClass');
let ctn1 = document.querySelector('.ctn1');
let ctn2 = document.querySelector('.ctn2');


button.addEventListener('click', function() {
  let myValue = document.querySelector('.inputClass').value;

  if (!isNaN(parseInt(myValue))) {
    ctn1.innerHTML = myValue;
  } else if (typeof myValue == 'string') {
    ctn2.innerHTML = myValue;
  }

  document.querySelector('.inputClass').value = "";
});

<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass" />

<div class="wrapper">
  <div class="container-2">
    <p class="ctn1">Tu będzie number</p>
  </div>
  <div class="container-2">
    <p class="ctn2">Tu będzie string</p>
  </div>
</div>

Answer 1

您需要使用addition assignment operator（+ =）来添加旧值之外的新值。

例如：将abc.innerHTML = myValue;更改为abc.innerHTML += myValue;，以停止覆盖innerhtml内容。

let button = document.querySelector('.buttonClass');
let ctn1 = document.querySelector('.ctn1');
let ctn2 = document.querySelector('.ctn2');


button.addEventListener('click', function() {
    let myValue = document.querySelector('.inputClass').value;

    if(!isNaN(parseInt(myValue))){
        ctn1.innerHTML += myValue;
    } else if (typeof myValue == 'string') {
        ctn2.innerHTML += myValue;
    }

    document.querySelector('.inputClass').value = "";
});

<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>

<div class="wrapper">
 <div class="container-2">
    <p class="ctn1">Tu będzie number: </p>
 </div>
 <div class="container-2">
    <p class="ctn2">Tu będzie string: </p>
 </div>
</div>

Answer 2

我不确定您的要求到底是什么。尽管如此，我还是根据我对问题的理解为您提供答案。似乎您想在每次按下Submit按钮时添加一个新项目（数字或字符串）。牢记这一点，我以以下方式编辑了您的代码：

HTML代码：

<input type="text" class='inputClass' />`
<input type="button" value="Submit" class="buttonClass" />

<div class="wrapper">
  <div class="container-2">
  </div>
  <div class="container-2">
  </div>
</div>

JavaScript代码：

let button = document.querySelector('.buttonClass');
let containers = document.getElementsByClassName('container-2');
let container1 = containers[0];
let container2 = containers[1];

button.addEventListener('click', function() {
  let myValue = document.querySelector('.inputClass').value;

  let para = document.createElement("p");
    let node = document.createTextNode(myValue);

  if (!isNaN(parseInt(myValue))) {
    container1.appendChild(node);
  } else if (typeof myValue == 'string') {
    container2.appendChild(node);
  }

  document.querySelector('.inputClass').value = "";
});

说明： 我正在基于类<div>并根据您识别输入值container-2的逻辑来搜索所有type元素，我正在添加一个新的<p> HTML元素作为子元素到相应的<div>元素。我正在放置JSFiddle链接here，以便您可以对其进行测试。

通过单击提交添加新元素

2 个答案: