在 JQuery 中使用 append 附加时，我无法将 CSS 添加到元素答案

【问题标题】：I am not able to add CSS to elements when appended using append in JQuery在 JQuery 中使用 append 附加时，我无法将 CSS 添加到元素
【发布时间】：2021-08-18 02:01:42
【问题描述】：

我已经添加了所有使用的代码，这很麻烦

下面是代码

<div id="notCompleted">
            <h3> Not Completed</h3>
            <div class="tasks" id="1">
                <input type="checkbox">
                <label> I have a bike</label>
            </div>
        </div>

下面是JQuery

    var taskNumber = 0;

    function insertTask(d) {

        if ($("#plainText").val() != '') {

            $("#notCompleted").append('<div class="tasks" id="' + taskNumber + '">',
                '<input type="checkbox">',
                '<label>' + d + '</label>',
                '</div>');
            $("#plainText").val('');
            taskNumber++;
            console.log(taskNumber);
            console.log(d);
        }

    }

下面是 CSS

.tasks{
    margin: 5px 5px;
    border-radius: 5px;
    background-color: rgb(141, 190, 145);
}

【问题讨论】：

标签： html jquery css web

【解决方案1】：

您需要将您的字符串与+ 连接起来以形成一个完整的html sn-p，否则jquery 会将每个字符串作为一个单独的语句。

更新了sn-p：

var taskNumber = 0;

function insertTask(d) {

  if ($("#plainText").val() != '') {

    $("#notCompleted").append('<div class="tasks" id="' + taskNumber + '">'+
      '<input type="checkbox">'+
      '<label>' + d + '</label>'+
      '</div>');
    $("#plainText").val('');
    taskNumber++;
    console.log(taskNumber);
    console.log(d);
  }

}
insertTask("abc");
insertTask("def");

.tasks {
  margin: 5px 5px;
  border-radius: 5px;
  background-color: rgb(141, 190, 145);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="notCompleted">
  <h3> Not Completed</h3>
  <div class="tasks" id="1">
    <input type="checkbox">
    <label> I have a bike</label>
  </div>
</div>

【讨论】：