javascript - 我无法通过添加按钮添加多个文本并显示一些额外的 CSS

Question

我的第一个问题是，当我从输入字段和 div 获取文本时，输入字段文本没问题，但 div 文本显示额外的 CSS 样式。请看截图。

<input id="accordion_input" type="text">
<div id="editableDiv"  contenteditable=""></div>

第二个问题是，当我单击“添加”按钮时，输入和 div 文本仅出现一次。我想通过单击按钮多次添加文本。

$(document).ready(function() {
  $('#Add_btn').click(function() {
    $('#accordion_body').text($('#editableDiv').html());
    var x = document.getElementById("accordion_input").value;
    document.getElementById("accordion_title").innerHTML = x;
  });  
  
  $("#acc_main").append(); 
});

<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div>
<div id="acc_main" contenteditable="false" class="accordion-main">
  <div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
        <h4 class="panel-title">
          <a id="accordion_title"></a>
        </h4>
        <div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div id="accordion_body" class="panel-body"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<button onclick="myAccorFunction()" id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

首先请注意，您有一个 onclick 属性引用了一个不存在的函数，这会导致错误。删除该属性。无论如何都不应该使用它们。

关于您提到的“CSS 样式”，这是由于编码的 HTML 在您尝试使用 text() 方法将 HTML 添加到元素时可见。从技术上讲，您应该改用 html()，但如果您想在每次单击按钮时添加一个新的字符串实例，请改用 append()。试试这个:

$(document).ready(function() {
  $('#Add_btn').click(function() {
    $('#accordion_body').append($('#editableDiv').html());
    
    var x = $("#accordion_input").val();
    $("#accordion_title").append(x);
  });  
});

<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div>
<div id="acc_main" contenteditable="false" class="accordion-main">
  <div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
        <h4 class="panel-title">
          <a id="accordion_title"></a>
        </h4>
        <div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div id="accordion_body" class="panel-body"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<button id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另请注意，我将原生 JS 转换为 jQuery；如果你已经加载了它，你也可以使用它。我还删除了 $("#acc_main").append(); 行，因为它是无用的代码，根本不执行任何操作。