Вставить в div при клике

Question

<div class="form"></div>
<p class="add_guest">Привет мир</p>

$(document).on('click', '.add_guest', function(){
    // Код ???
});

Как при клике на Привет мир клонировать его в form В итоге чтоб получилось

<div class="form"><p class="add_guest">Привет мир</p></div>

Answer 1

перенести или именно клонировать? в общем в случае чего detach уберете :)

<html>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="form" id="mydiv"></div>
<p class="add_guest" id="myp">Привет мир</p>

<script>
$(document).on('click', '.add_guest', function(){
 var element = $('#myp').detach();
 $('#mydiv').append(element);

});
</script>
</html>

Answer 2

т.к. вы используете jquery но об этом не говорите то тут все очень так просто

$(".form").append($(".add_guest").clone());

Answer 3

$(".add_guest").click(function(e) {
  $(".form").append($(this).clone());
});

.form {
  background-color: gray;
  width: 100%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="client">

  <div class="form"></div>
  <p class="add_guest">Привет мир</p>

</div>

Answer 4

Вариант без JQuery:

<div class="form" id="form1"></div>
<p class="add_guest" id="add_guest" onclick="document.getElementById('form1').innerHTML = document.getElementById('add_guest').innerHTML;">Привет мир</p>

Вместо getElementById можно getElementByName и т.д.

Если нужно скопировать включая тег без лишнего кода, то примерно так:

<div class="form" id="form1"></div>
<p class="add_guest" id="add_guest">Привет мир</p>
<script>
window.onload = function ()
{
  var a = document.getElementById('add_guest');
  a.onclick = function()
  {
    document.getElementById('form1').innerHTML = document.getElementById('add_guest').outerHTML;
    return false;
  }
}
</script>

БЛОГ НА HUSL

Вставить в div при клике

Ответы (4 шт):