我想添加带有div元素

Question

I was playing around jQuery and wanted to add div element with append but it doesn't seem to work, it does absolutely nothing when I click on button .

 $(document).ready(function() { $('#main').on('click', '#btn', function() { var value = $('#main input').val(); var html = '<div id="cont4><p>' + value + '</p></div>'; $('#main').append(html); }) }) 

 #cont4 { width: 290px; height: 600px; background: rgb(30, 33, 33, 0.85); margin-top: 15vh; margin-left: 17vh; border-radius: 25px; transition: 0.35s; color: white; text-align: center; box-shadow: 5px 10px #0c0921; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <div id="cont1"> <h1>Basic</h1> <p>Buy <span>Basic</span> packet and get:</p> <p>300 Minutes Talk</p> <p>500 SMS</p> <p>5GB NET<a href="google.com" class="ppp"> More info</a></p> <button>Buy Now !</button> </div> <input>asd <button id="btn">add</button> </div> 

Answer 1

You have a small typo error in your code ;). closing " is missing in your append function

 $(document).ready(function() { $('#main').on('click', '#btn', function() { var value = $('#main input').val(); var html = '<div id="cont4"><p>' + value + '</p></div>'; $('#main').append(html); }) }) 

 #main { background: red; padding: 10px; cursor: pointer; } #cont4 { background: green; padding: 10px; } #btn { background: gray; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="main"><input type="text"></input>This is the main container<button id="btn">Button</button></div> 

Answer 2

You need to create a jQuery element for append function. Change this

'<div id="cont4"><p>' + value +'</p></div>'

to

 $('<div id="cont4"><p>' + value +'</p></div>');

that means you are creating a element from that string. then append that to another element.

$(document).ready(function() {
            $('#main').on('click', '#btn', function(){
                var value = $('#main input').val();
                var html = $('<div id="cont4"><p>' + value +'</p></div>');
                $('#main').append(html);
            })
})

Answer 3

you missed double quotes for id="cont4" in this line, so use the below line in your js

var html = '<div id="cont4"><p>' + value +'</p></div>';

Working code here

 $(document).ready(function() { $('#main').on('click', '#btn', function() { var value = $('#main input').val(); var html = '<div id="cont4"><p>' + value + '</p></div>'; $('#main').append(html); }) }) 

 #cont4 { width: 290px; height: 600px; background: rgb(30, 33, 33, 0.85); margin-top: 15vh; margin-left: 17vh; border-radius: 25px; transition: 0.35s; color: white; text-align: center; box-shadow: 5px 10px #0c0921; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <div id="cont1"> <h1>Basic</h1> <p>Buy <span>Basic</span> packet and get:</p> <p>300 Minutes Talk</p> <p>500 SMS</p> <p>5GB NET<a href="google.com" class="ppp"> More info</a></p> <button>Buy Now !</button> </div> <input>asd <button id="btn">add</button> </div>