javascript - append div to another div by class or Id

i have a simple form with an input field, i want to append the value taken from the input field inside an existing div, what i found is that if i try to append the input field value to a div with class property then the value does not get appended, yet if i try the same thing to the div with an Id property then the value gets appended just fine, so what am i doing wrong or missing here?

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=".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);
            });
    });

the code above does not work if i keep the (.list selector) in the css file as a class, but if i change it into a (#list) then call it accordingly in the js and html then whatever i enter in the input field gets appended normally.

sorry for the long question, i'm sure you came looking for a more challenging one ;)

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./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);
            });
    });

sorry for the long question, i'm sure you came looking for a more challenging one ;)

Share Improve this question asked Jun 21, 2016 at 20:29 Elias Rub 991 gold badge3 silver badges10 bronze badges

What about $('.list').append(item); ? – Alex Kudryashev Commented Jun 21, 2016 at 20:59

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

I'll suggest you to use another name because list is a very mon name and I think you're code is conflicting with other code. Like I used here list-container as the class name.

$(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./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>

Hope this will help you. Thanks.

I think since you are selecting a class,

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

should be

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

Use "$('.list')" instead of "$('list')", otherwise you are telling it to append it to an element "", which doesn't exist.

You'd use ("#list") for a div with an id of list.

 $(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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - append div to another div by class or Id - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)