Блог

Главная - Вопросы по программированию - Как я могу скопировать HTML-элементы в другой Div?

Как я могу скопировать HTML-элементы в другой Div?

#javascript #jquery #css #xhtml

#javascript #jquery #css #xhtml

Вопрос:

Что я хочу сделать, это скопировать изображения «source» или «html elements» в другой div при нажатии на «копировать». Смотрите мой пример ниже 

 <div class="images">
 <img src="imageone.jpg" alt="one" title="one">
</div><!-- end -->
<button>Copy</button>


<div class="images">
 <img src="imageone.jpg" alt="one" title="one">
</div><!-- end -->
<button>Copy</button>

<div class="images">
 <img src="imagethree.jpg" alt="three" title="three">
</div><!-- end -->
<button>Copy</button>

как только я нажму кнопки копирования — изображение HTML (не сами изображения) будет скопировано в этот div (как показано ниже — включая теги alt image source и title tag)

 <div id="copied-container">
  <div id="copiedimages">
     <img src="imagetwo.jpg" alt="two" title="two">
     <img src="imageone.jpg" alt="one" title="one">
     <img src="imagethree.jpg" alt="three" title="three">
  </div>
 <button>delete</button> <!-- this will remove any images when i select them or highlight them -->
</div>

Я не беспокоюсь о том, что мой div, содержащий мои изображения, будет скопирован, моя главная задача — скопировать атрибуты html изображения

я также хотел бы, чтобы кнопка могла удалять любые изображения при выделении нажатием delete. Смотрите мой приведенный выше пример

Примечание: Чтобы упростить это — я хотел бы скопировать источник изображений, тег title, тег alt в этот div, чтобы затем я мог скопировать html-элементы. Я также хотел бы иметь возможность удалять любой html внутри #copied-container, когда я выделяю и нажимаю delete.

Ответ №1:

 $('button').click(function(e){
  $('#copiedimages').append($(this).prev('div.images').html());
});

$('#delete').click(function(e){
    $('#copiedimages').html(' ');
});

Вот рабочая демонстрация:http://jsfiddle.net/Wsftp

Если вы хотите скопировать HTML в виде текста, вы можете просто заменить < и > на < и >

 $('button:not("#delete")').click(function(e){
  $('#copiedimages').append($(this).prev('div.images').html()
                                   .replace(/</ig, 'amp;<')
                                   .replace(/>/ig, 'amp;>'));
});

Смотрите пример: http://jsfiddle.net/Wsftp/1 /

Комментарии:

1. Я реализовал этот скрипт, но он не копирует мои изображения в мой div #copiedimages — он не выдает мне никаких ошибок.

2. Неважно, у меня получилось — но это не входит в мои намерения. Мне нравится, как вы написали, чтобы скопировать мои изображения, но, допустим, я хочу скопировать HTML ИЗОБРАЖЕНИЯ, а не само изображение?

3. Еще один вопрос для вас @mVChr — Как я могу удалить мой последний скопированный элемент в #copiedimages? или, когда я выбираю элемент и нажимаю удалить, он будет удален.

Ответ №2:

Это было бы хорошей работой для клона Jquery:

 $("button.copy").click(function() {
    $(this).prev().children("img").clone().appendTo("#copiedimages");
});

С помощью clone вы также можете при необходимости скопировать любые данные и события исходного элемента. Я бы также добавил класс к вашим кнопкам, чтобы убедиться, что выбраны правильные элементы.

Ответ №3:

 newdivelement= document.getElementById("olddiv").cloneNode(bool);

значение bool равно true или false

 $('#sel').clone().attr('id','newid').appendTo('#newPlace');