javascript - How can i create a new card by clicking on a button (js)?

admin管理员组
文章数量:1025507

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?

My Code: html:

    <div class="plus">+</div>
 <button onclick="newPerson()" class="plus">
     <div class="item">
     <p>title</p>
 </div>
 </button>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>

javaScript Code :

function newPerson() {
document.getElementByClassName("item")
};

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?

My Code: html:

    <div class="plus">+</div>
 <button onclick="newPerson()" class="plus">
     <div class="item">
     <p>title</p>
 </div>
 </button>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>

javaScript Code :

function newPerson() {
document.getElementByClassName("item")
};

Share Improve this question edited Aug 26, 2016 at 9:16 Ehsan 13k3 gold badges27 silver badges46 bronze badges asked Aug 26, 2016 at 8:40 Sandro21 3116 silver badges15 bronze badges

use the document.createElement methid – It's a trap Commented Aug 26, 2016 at 8:44
function newPerson() { document.createElement("item") };well it dident work what should i do? – Sandro21 Commented Aug 26, 2016 at 9:14
@Reto.K after creating element you have to insert it into document with appendChild(): developer.mozilla/pl/docs/Web/API/Element/appendChild – mx0 Commented Aug 26, 2016 at 9:20
@Reto.K I have added the answer. It works on my pc. – It's a trap Commented Aug 26, 2016 at 9:26
Thanks it works now – Sandro21 Commented Aug 26, 2016 at 9:42

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Try it :

$(document).ready(function(){

$("button.plus").on("click",function(){

$("div:last").after("<div class=item><p>Title</p></div>");

    })

})

This is Demo : UpdatedDemo

Do it like this

 <div id = "main">
 //your same html code

 </div>

 <script>
function newPerson() {
var newdiv  = document.createElement('div');
newdiv.className+='item';

var newp = document.createElement('p');
newp.innerHTML = "TItle";

newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
 </script>

You need to create the element through JS and append it to the document

This is another way to solve it:

function newPerson() {
  $('#wrapper').append('<div class="item"><p>Title</p></div>')
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="plus">+</div>
  <button onclick="newPerson()" class="plus">
    <div class="item">
      <p>title</p>
    </div>
  </button>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
</div>

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?

My Code: html:

    <div class="plus">+</div>
 <button onclick="newPerson()" class="plus">
     <div class="item">
     <p>title</p>
 </div>
 </button>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>

javaScript Code :

function newPerson() {
document.getElementByClassName("item")
};

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?

My Code: html:

    <div class="plus">+</div>
 <button onclick="newPerson()" class="plus">
     <div class="item">
     <p>title</p>
 </div>
 </button>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>

javaScript Code :

function newPerson() {
document.getElementByClassName("item")
};

Share Improve this question edited Aug 26, 2016 at 9:16 Ehsan 13k3 gold badges27 silver badges46 bronze badges asked Aug 26, 2016 at 8:40 Sandro21 3116 silver badges15 bronze badges

use the document.createElement methid – It's a trap Commented Aug 26, 2016 at 8:44
function newPerson() { document.createElement("item") };well it dident work what should i do? – Sandro21 Commented Aug 26, 2016 at 9:14
@Reto.K after creating element you have to insert it into document with appendChild(): developer.mozilla/pl/docs/Web/API/Element/appendChild – mx0 Commented Aug 26, 2016 at 9:20
@Reto.K I have added the answer. It works on my pc. – It's a trap Commented Aug 26, 2016 at 9:26
Thanks it works now – Sandro21 Commented Aug 26, 2016 at 9:42

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Try it :

$(document).ready(function(){

$("button.plus").on("click",function(){

$("div:last").after("<div class=item><p>Title</p></div>");

    })

})

This is Demo : UpdatedDemo

Do it like this

 <div id = "main">
 //your same html code

 </div>

 <script>
function newPerson() {
var newdiv  = document.createElement('div');
newdiv.className+='item';

var newp = document.createElement('p');
newp.innerHTML = "TItle";

newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
 </script>

You need to create the element through JS and append it to the document

This is another way to solve it:

function newPerson() {
  $('#wrapper').append('<div class="item"><p>Title</p></div>')
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="plus">+</div>
  <button onclick="newPerson()" class="plus">
    <div class="item">
      <p>title</p>
    </div>
  </button>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
  <div class="item">
    <p>Title</p>
  </div>
</div>

本文标签： javascriptHow can i create a new card by clicking on a button (js)Stack Overflow

版权声明：本文标题：javascript - How can i create a new card by clicking on a button (js)? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745636052a2160452.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How can i create a new card by clicking on a button (js)? - Stack Overflow

3 Answers 3

3 Answers 3

更多相关文章