Wie rendert man HTML in String mit Javascript?

Question 1

Ich habe folgenden Javascript-Code:

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);

Wenn dieser Code ausgeführt wird, wird die refer_summary Variable enthält tatsächlich eine Zeichenfolge, die HTML-Tags wie enthalten kann <b>, <i> usw., jedoch werden diese Tags auf der Seite angezeigt, anstatt ihr Verhalten wiederzugeben.

Zum Beispiel auf der Seite, die es zeigen würde <b> vielmehr den Inhalt fett zu machen.

Wie kann ich die HTML-Tags rendern, wenn der Wert angehängt wird?

In meiner Django-Vorlage verwende ich {% autoescape off %}{{content}}{% endautoescape %} Wenn ich also die Seite zum ersten Mal lade, wird der Inhalt korrekt mit Fettdruck usw. gerendert. Aber wie kann ich dasselbe tun, wenn ich den HTML-Code von Javascript anfüge?

Danke für die Hilfe!

Question 2

Sie können HTML mit rendern document.write()

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

Um jedoch einen vorhandenen HTML-String anzuhängen, müssen Sie die ID des Knotens/Tags abrufen, unter dem Sie Ihren HTML-String einfügen möchten.

Es gibt zwei Möglichkeiten, wie Sie dies möglicherweise erreichen können:

Verwenden von DOM –

var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));

Verwenden von innerHTML –

var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';

Question 3

Verwenden Sie $.parseHTML vor dem Anhängen von HTML wie as

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);

Question 4

Sie können Javascript verwenden 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

Question 5

Wenn Sie dies in ReactJS tun möchten, können Sie das Attribut “dangerouslySetInnerHTML” anstelle des Attributs “innerHTML” verwenden.

Da es den Angreifern ermöglicht, Codes (XSS) einzuschleusen, wird es als gefährlich bezeichnet!

const myHtmlData = `
    <ul>
        <li>Item1<li>
        <li>Item2<li>
    </ul>`;
...
<div
    dangerouslySetInnerHTML={{
        __html: myHtmlData
}}>

Question 6

Sie müssen einem bestimmten Div eine ID zuweisen und dann die Benutzeroberfläche in dem spezifischen Div entsprechend bearbeiten/ändern.

Gegeben Hier ist eine hervorragende Erklärung.