按类或 Id 将 div 附加到另一个 div答案

【问题标题】：append div to another div by class or Id按类或 Id 将 div 附加到另一个 div
【发布时间】：2016-06-22 04:35:54
【问题描述】：

我有一个带有输入字段的简单表单，我想将取自输入字段的值附加到现有 div 中，我发现如果我尝试将输入字段值附加到具有类属性的 div 则不会附加该值，但是如果我尝试对具有 Id 属性的 div 进行相同的操作，则该值会很好地附加，那么我在这里做错了什么或错过了什么？

1）CSS：

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#cc0000;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#cc0000;
}

2) HTML：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Result</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script type='text/javascript' src='application.js'></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
            <form name="checkListForm">
            <input type="text" name="checkListItem"/>
            </form>

            <div id="button">Add!</div>
            <br/>
            <div class="list"></div>

    </body>
</html>

3) javascript：

 $(document).ready(function()
    {    
    $("#button").click(function(){

            var toAdd = $('input[name=checkListItem]').val();
            var item = $("<div>"+toAdd+"</div>");
            $('list').append(item);
            });
    });

如果我将 css 文件中的 (.list 选择器) 作为一个类保留，则上面的代码不起作用，但是如果我将其更改为 (#list) 然后在 js 和 html 中相应地调用它，那么无论我输入什么在输入字段中被正常附加。

抱歉这个问题太长了，我敢肯定你是来找一个更有挑战性的;)

【问题讨论】：

$('.list').append(item); 呢？

标签： javascript jquery css-selectors append

【解决方案1】：

我建议您使用其他名称，因为 list 是一个非常常见的名称，我认为您的代码与其他代码冲突。就像我在这里使用 list-container 作为类名一样。

$(document).ready(function() {
  $("#button").click(function() {

    var toAdd = $('input[name=checkListItem]').val();
    var item = $("<div>" + toAdd + "</div>");
    $('.list-container').append(item);
  });
});

form {
  display: inline-block;
}
#button {
  display: inline-block;
  height: 20px;
  width: 70px;
  background-color: #cc0000;
  font-family: arial;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
}
.list-container {
  font-family: garamond;
  color: #cc0000;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>

<div id="button">Add!</div>
<br/>
<div class="list-container"></div>

希望这会对您有所帮助。谢谢。

【讨论】：

【解决方案2】：

我想既然你在选择一个班级，

$('list').append(item);

应该是

$('.list').append(item);

【讨论】：

【解决方案3】：

使用“$('.list')”而不是“$('list')”，否则你告诉它把它附加到一个不存在的元素“”上。

您可以将 ("#list") 用于 id 为 list 的 div。

 $(document).ready(function() {
   $("#button").click(function() {
     console.log("Button clicked...");
     
     var toAdd = $('input[name=checkListItem]').val();
     console.log("To Add: ", toAdd);
     
     var item = $("<div>" + toAdd + "</div>");
     $('.list').append(item);
   });
 });

form {
  display: inline-block;
}
#button {
  display: inline-block;
  height: 20px;
  width: 70px;
  background-color: #cc0000;
  font-family: arial;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
}
.list {
  font-family: garamond;
  color: #cc0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>

<div id="button">Add!</div>
<br/>
<div class="list"></div>

【讨论】：