Show A String Of My Div And Append

How do I show a string representation of my div emptied then append to it? var x = $('#myDiv').outerHTML(); x = x.empty().append('

test

'); //result must loo

Solution 1:

You need to add the div to a parent. First create the div you want:

var myDiv = $('#myDiv').empty().append("<h1>test</h1>");

Add it to a container:

var outerHTMLDiv = $("<div></div>").append(myDiv).html();

outerHTMLDiv is now

 <div id="myDiv"><h1>test</h1></div>

Solution 2:

You need html() method of jquery that will assign html and previous html / text if exists will be removed.

Live Demo

$('#myDiv').html('<h1>test</h1>');

Solution 3:

html() method will override existing data

$('#myDiv').html("<h1>asasas</h1>");

Solution 4:

Maybe I have completely misunderstood what you want, or maybe I am not completely nuts. But, here's a function I have for you. If I am way off, please comment below and I will delete this answer. That said, here is what I thought you want.

There's a jsbin also.

HTML

<div id="myDiv" class="some_class">Some content already exists</div>

End goal: Want to empty the content, in it's place want to show how it would be written in html and also append some more text. Your input is the id of the element.

Here's the jQuery

$(document).ready( function(){
    var id_to_change = 'myDiv';
    var content_to_add = '<h1>Test</h1>';
    show_details(id_to_change, content_to_add);
});

And here's the function definition

functionshow_details( id, text ){
  var$el = $('#'+id);
  var lt = '<';
  var gt = '>';
  var tag = $el.prop('tagName').toLowerCase();

  // This is messed up, but I dunno how else to do it easily$el.text( text );
  var text_with_tags = $el.html();
  $el.text('');

  $el.append(lt+tag);

  var el = document.getElementById(id);  
  for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
    attr = attrs.item(i);
    $el.append(' '+attr.nodeName+'="'+attr.nodeValue+'"');
  }

  $el.append(gt+text_with_tags+lt+tag+gt);
}

Once the function runs, the actual contents of the div will be

<divclass="some_class"id="myDiv"><h1>Test</h1><div>

Solution 5:

You can also use wrapInner()

   $("#id").empty().wrapInner('<h1>test</h1>')​​