webmonkey237 webmonkey237 - 4 months ago 13
jQuery Question

jQuery: Copy HTML and output it into xmp

What seamed like a simple concept in my head doesn't seam to work, what I am trying to build is a simple jQuery "app" where a user can change styles of some objects using a class toggle and then once the user is happy with the result they can output the HTML so they can copy it and email it to me.

Fiddle

So I found out how to clone HTML and output the clone into a xmp tag however it just makes a duplicate rather than outputting the raw HTML which to me doesn't make much sense since its inside the xmp tag, there is something i'm missing or don't understand.

$(document).ready(function() {

$('.toggleSwitch').click(function(){
$('.redSquare').toggleClass('toggleBorder');
$(this).toggleClass("on");
});

$('.output').click(function(){
var $code = $('.container').clone();
$('.outputCon').html($code);
});

});

Answer

Instead of:

$('.output').click(function(){
  var $code = $('.container').clone();
  $('.outputCon').html($code);
});

Use:

   $('.output').click(function(){
      var $code = $('.container').html();
      $('.outputCon').text($code);
    });
Comments