web-dev-qa-db-ja.com

JavaScriptでHTMLを文字列にレンダリングする方法は？

次のJavaScriptコードがあります。

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
$("#references").append(html);

このコードを実行すると、refer_summary変数には実際には<b>、<i>などのHTMLタグを含む可能性のある文字列が含まれますが、これらのタグはレンダリングされずにページに表示されます動作。

たとえば、ページでは実際にコンテンツを太字にする代わりに<b>と表示されます。

値が追加されたときにHTMLタグをレンダリングするにはどうすればよいですか？

私のDjangoテンプレートでは{% autoescape off %}{{content}}{% endautoescape %}を使用しているため、最初にページをロードすると、コンテンツは太字などで正しくレンダリングされます。しかし、 javascript？

助けてくれてありがとう！

javascripthtmldjango
10
user2573690

document.write（）を使用してHTMLをレンダリングできます

document.write('<html><body><h2>HTML</h2></body></html>');

ただし、既存のHTML文字列を追加するには、HTML文字列を挿入するノード/タグのIDを取得する必要があります。

これを実現できる方法は2つあります。

  1. DOMの使用-

    var tag_id = document.getElementById（ 'tagid'）; var newNode = document.createElement（ 'p'）; newNode.appendChild（document.createTextNode（ 'html string'））; node.appendChild（newNode）;

  2. InnerHTMLの使用-

var tag_id = document.getElementById（ 'tagid'）; tag_id.innerHTML（ 'HTML string'）;

これがお役に立てば幸いです。ありがとう

2
SS_25

次のようにHTMLを追加する前に$ .parseHTMLを使用します

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
html = $.parseHTML( html);
$("#references").append(html);
2
Manoj Patidar

特定のdivにIDを割り当て、それに応じて特定のdivでUIを処理/変更する必要があります。

与えられた ここ は優れた説明です。

1
IteratioN7T

JavaScriptのdocument.createRange().createContextualFragmentを使用できます。

const frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
  #document-fragment
    <div>One</div>
    <div>Two</div>
*/

https://davidwalsh.name/convert-html-stings-dom-nodes

1
weigel