Я не могу добавить несколько текстов, нажав кнопку добавления и показывая некоторые дополнительные CSS

Question

Моя первая проблема заключается в том, что когда я беру текст из поля ввода и div, текст поля ввода в порядке, но текст div показывает дополнительные стили CSS.Пожалуйста, смотрите скриншот.

<input id="accordion_input" type="text">
<div id="editableDiv"  contenteditable=""></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, который виден, когда вы пытаетесь добавить HTML к элементу, используя text()метод.Технически вы должны использовать 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();, так как это бесполезный код, который вообще ничего не делает.