我想添加带有div元素

Question

我在玩jQuery，想添加带有append div元素，但是它似乎不起作用，当我单击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

您的代码中有一个小的拼写错误;）。 您的附加函数中缺少“关闭”

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

您需要为append函数创建一个jQuery element 。 改变这个

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

至

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

这意味着您正在根据该字符串创建元素。 然后将其附加到另一个元素。

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

您在此行中错过了id="cont4"双引号，因此请在您的js中使用以下行

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

这里的工作代码

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