空にした div の文字列表現を表示して追加するにはどうすればよいですか?
var x = $('#myDiv').outerHTML();
x = x.empty().append('<h1>test</h1>');
//result must look like <div id="myDiv"><h1>test</h1></div>
空にした div の文字列表現を表示して追加するにはどうすればよいですか?
var x = $('#myDiv').outerHTML();
x = x.empty().append('<h1>test</h1>');
//result must look like <div id="myDiv"><h1>test</h1></div>
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>
html() メソッドは既存のデータを上書きします
$('#myDiv').html("<h1>asasas</h1>");
多分私はあなたが望むものを完全に誤解しているか、あるいは私は完全に頭がおかしいわけではありません. しかし、ここに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 = '<';
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);
}
関数が実行されると、div の実際の内容は次のようになります。
<div class="some_class" id="myDiv"><h1>Test</h1><div>
wrapInner()を使用することもできます
$("#id").empty().wrapInner('<h1>test</h1>')