Question

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

您需要为{"error":{"code":500,"message":"Internal Server Error","exception":[{"message":"Reading from the response stream reached the inactivity timeout.","class":"Symfony\\Component\\HttpClient\\Exception\\TransportException","trace":[{"namespace":"","short_class":"","class":"","type":"","function":"","file":"D:\\vendor\\symfony\\http-client\\Chunk\\ErrorChunk.php","line":105,"args":[]},{"namespace":"Symfony\\Component\\HttpClient\\Chunk","short_class":"ErrorChunk","class":"Symfony\\Component\\HttpClient\\Chunk\\ErrorChunk","type":"->","function":"__destruct","file":"\\vendor\\symfony\\http-client\\Response\\CurlResponse.php","line":121,"args":[]},{"namespace":"Symfony\\Component\\HttpClient\\Response","short_class":"CurlResponse","class":"Symfony\\Component\\HttpClient\\Response\\CurlResponse","type":"::","function":"Symfony\\Component\\HttpClient\\Response\\{closure}","file":"\\vendor\\symfony\\http-client\\Response\\ResponseTrait.php","line":67,"args":[["object","Symfony\\Component\\HttpClient\\Response\\CurlResponse"]]},{"namespace":"Symfony\\Component\\HttpClient\\Response","short_class":"CurlResponse","class":"Symfony\\Component\\HttpClient\\Response\\CurlResponse","type":"->","function":"getStatusCode","file":"\\src\\Controller\\RestApiController.php","line":121,"args":[]},{"namespace":"App\\Controller","short_class":"RestApiController","class":"App\\Controller\\RestApiController","type":"->","function":"login","file":"D:\\Binghana\\new\\goldwin-website\\vendor\\symfony\\http-kernel\\HttpKernel.php","line":150,"args":[["object","Symfony\\Component\\HttpFoundation\\Request"]]},{"namespace":"Symfony\\Component\\HttpKernel","short_class":"HttpKernel","class":"Symfony\\Component\\HttpKernel\\HttpKernel","type":"->","function":"handleRaw","file":"\\vendor\\symfony\\http-kernel\\HttpKernel.php","line":67,"args":[["object","Symfony\\Component\\HttpFoundation\\Request"],["integer",1]]},{"namespace":"Symfony\\Component\\HttpKernel","short_class":"HttpKernel","class":"Symfony\\Component\\HttpKernel\\HttpKernel","type":"->","function":"handle","file":"D:\\Binghana\\new\\goldwin-website\\vendor\\symfony\\http-kernel\\Kernel.php","line":198,"args":[["object","Symfony\\Component\\HttpFoundation\\Request"],["integer",1],["boolean",true]]},{"namespace":"Symfony\\Component\\HttpKernel","short_class":"Kernel","class":"Symfony\\Component\\HttpKernel\\Kernel","type":"->","function":"handle","file":"D:\\Binghana\\new\\goldwin-website\\public\\index.php","line":25,"args":[["object","Symfony\\Component\\HttpFoundation\\Request"]]}]}]}}函数创建一个jQuery element。改变这个

append

到

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

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

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

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>

我想添加带有div元素

3 个答案: