Javascript 按类或Id将div追加到另一个div_Javascript_Jquery_Css Selectors_Append

Javascript 按类或Id将div追加到另一个div

javascript jquery

Javascript 按类或Id将div追加到另一个div,javascript,jquery,css-selectors,append,Javascript,Jquery,Css Selectors,Append,我有一个带有输入字段的简单表单，我想在现有div中附加从输入字段获取的值，我发现，如果我尝试将输入字段值附加到具有class属性的div，则不会附加该值，但是如果我尝试将相同的操作附加到具有Id属性的div，则会很好地附加该值，那么我在这里做错了什么或缺少了什么呢 1 CSS： form { display: inline-block; } #button{ display: inline-block; height:20px; width:70px;

我有一个带有输入字段的简单表单，我想在现有div中附加从输入字段获取的值，我发现，如果我尝试将输入字段值附加到具有class属性的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);
            });
    });

如果我将.list选择器作为一个类保留在css文件中，则上面的代码不起作用，但是如果我将其更改为一个列表，然后在js和html中相应地调用它，那么在输入字段中输入的任何内容都会被正常追加

很抱歉问了这么长的问题，我相信你是来找一个更具挑战性的问题的

使用$'.list'而不是$'list'，否则您会告诉它将其附加到一个不存在的元素

您将使用list作为id为list的div

$document.readyfunction{ $button.clickfunction{ console.logButton已单击。。。； var toAdd=$'input[name=checkListItem]'。val； console.logTo Add:，to Add；变量项=$+toAdd+； $'.list'。追加项； }; }; 形式{ 显示：内联块； } 钮扣{ 显示：内联块；高度：20px；宽度：70px；背景色：cc0000；字体系列：arial；字体大小：粗体；颜色：ffffff；边界半径：5px；文本对齐：居中；边缘顶部：2倍； } .名单{ 字体系列：garamond；颜色：cc0000； } 添加

使用$'.list'而不是$'list'，否则您会告诉它将其附加到一个不存在的元素

您将使用list作为id为list的div

我想既然你选了一个班

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

应该是

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

我想既然你选了一个班

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

应该是

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

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

$document.readyfunction{ $button.clickfunction{ var toAdd=$'input[name=checkListItem]'。val；变量项=$+toAdd+； $'.list container'.appenditem； }; }; 形式{ 显示：内联块； } 钮扣{ 显示：内联块；高度：20px；宽度：70px；背景色：cc0000；字体系列：arial；字体大小：粗体；颜色：ffffff；边界半径：5px；文本对齐：居中；边缘顶部：2倍； } .列表容器{ 字体系列：garamond；颜色：cc0000； } 添加

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