点击按钮时如何将文本框值存入新div而非追加至同一div？

Got it, let's fix this so each new entry gets its own div stacked neatly below the last one! First, let's break down the issues in your original code, then walk through the corrected version step by step.

原代码的核心问题 #

• 重复使用同一个ID (add-card)：IDs must be unique in HTML, which breaks selector logic for multiple elements
• 混乱的DOM插入逻辑：Your append chain wasn't targeting the right container to stack elements
• 冗余的选择器：document.getElementById('#add-card') incorrectly includes a # (getElementById uses raw ID names)

1. 修正后的HTML #

First, let's clean up the structure to make it easier to manage inputs and card elements:

<a id="newcard" href="#" onclick="add()"> 
  <b style="color: #444444">Add Card...</b> 
</a>
<div class="flex-container">
  <div id="cardarea" class="parent2">
    <!-- Title section -->
    <div id="card-header">
      <span><b class="card1" id="cardtitle">Stuff To Try (this is a list)</b></span>
      <span>
        <i class="fa fa-ellipsis-h card1" title="List Actions" tabindex="0" data-trigger="focus" data-toggle="popover"></i>
      </span>
    </div>
    <!-- Container for all new cards (this is where we'll stack elements) -->
    <div id="cards-container"></div>
    <!-- Hidden input area -->
    <div id="input-section">
      <textarea class="t" id="txtarea" style="display:none"></textarea>
      <button id="firstbutton" class="btn btn-success nbutton" onclick="addtext()" style="display:none">Add</button>
    </div>
  </div>
</div>

• Added #cards-container as a dedicated parent for all new cards (keeps DOM organized)
• Separated the title, input, and card areas for better readability

2. Updated CSS #

Swap the ID selector for a class (since we'll create multiple card elements):

.card-item {
  margin: 8px 5px;
  padding: 8px;
  border-radius: 5px;
  background-color: #ffffff;
  min-height: 30px;
  width: 250px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

#input-section {
  margin-top: 10px;
}

• .card-item replaces the old #add-card and styles every new card consistently
• Added a light shadow to make cards stand out visually

3. Reworked JavaScript/jQuery #

Simplify the logic and fix the stacking behavior:

function add() {
  // Show input field and button, auto-focus the textarea for better UX
  $('#txtarea').show().focus();
  $('#firstbutton').show();
}

function addtext() {
  const inputValue = $('#txtarea').val().trim();
  
  // Don't create empty cards
  if (!inputValue) {
    alert("Please enter some text first!");
    return;
  }

  // Create a new card div with the input text
  const newCard = $('<div class="card-item"></div>').text(inputValue);
  
  // Append the new card to the container - this stacks it below the last one
  $('#cards-container').append(newCard);

  // Reset input area for next use
  $('#txtarea').val('').hide();
  $('#firstbutton').hide();
}

• Stacking behavior: Using append() on #cards-container automatically adds new cards to the bottom of the container
• UX improvements: Added empty input validation, auto-focus on the textarea, and resetting the input field after submission
• Cleaner logic: Removed redundant display checks (use jQuery's show()/hide() instead)

Key Improvements Recap #

• Unique elements: No more duplicate IDs - we use a class for repeatable card elements
• Organized DOM: Dedicated container for cards makes it easy to manage and style all entries
• Better user experience: Input validation, auto-focus, and clean reset after submission

Now every time you click "Add", a new card will appear directly below the previous one, exactly as you requested!

内容的提问来源于stack exchange，提问作者sanjana