Как создать новую карту, нажав кнопку (js)?

Я новичок в javascript. Кнопка, которую я хочу сделать, должна добавлять каждый раз, щелкая по ней новую карту на моей веб-странице. К сожалению, мой код не работает. Можете ли вы, ребята, помочь мне?Как создать новую карту, нажав кнопку (js)?

Мой код: 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>

Код Яваскрипт:

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

источник

2016-08-26 Sandro21

использовать document.createElement methid –

функцию newPerson() { document.createElement ("item") }, хорошо, что я должен работать, что мне делать? – Sandro21

@ Reto.K после создания элемента вы должны вставить его в документ с помощью appendChild(): https://developer.mozilla.org/pl/docs/Web/API/Element/appendChild – mx0

Попробуйте:

$(document).ready(function(){ 

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

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

    }) 

})

Это демо: UpdatedDemo

источник

2016-08-26 09:04:29 Ehsan

Спасибо, что работает сейчас – Sandro21

Добро пожаловать! – Ehsan

Как я уже сказал, это работает сейчас. есть только одна проблема с этим кодом, что css для этих карточек, которые я могу добавить, теперь больше не работает. класс стилизовал его также с классом ... У вас также есть решение? – Sandro21

Делают это, как этот

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

Вам нужно создать элемент с помощью JS и добавить его в документ

источник

2016-08-26 08:58:36

Это еще один способ решить:

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

<script src="https://ajax.googleapis.com/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>

источник

2016-08-26 09:03:57 Zorken17

Как создать новую карту, нажав кнопку (js)?

ответ

Смежные вопросы