Question

如何显示我的div的字符串表示形式，然后附加到它？

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


//result must look like  <div id="myDiv"><h1>test</h1></div>

Answer 1

您需要html() jquery方法assign html and previous html / text if exists will be removed。

<强> Live Demo

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

Answer 2

您需要将div添加到父级。首先创建你想要的div：

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

将其添加到容器中：

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

outerHTMLDiv现在是

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

Answer 3

html（）方法将覆盖现有数据

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

Answer 4

也许我完全误解了你想要的东西，或者我可能并不完全疯了。但是，这是我有function给你的。如果我离开了，请在下面评论，我将删除此答案。那就是说，这就是我想你想要的。

还有jsbin。

HTML

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

结束目标：想要清空内容，在它的位置想要显示它将如何写入html并附加更多文字。您的输入是元素的id。

这是jQuery

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

这是功能定义

function show_details( id, text ){
  var $el = $('#'+id);
  var lt = '&lt;';
  var gt = '&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);
}

一旦函数运行，div的实际内容将是

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

Answer 5

您也可以使用wrapInner()

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

显示我的div的字符串并追加

5 个答案: