web-dev-qa-db-fra.com

Comment rendre HTML en chaîne avec Javascript?

J'ai le code javascript suivant:

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

Lorsque ce code est exécuté, la variable refer_summary contient en fait une chaîne pouvant contenir des balises HTML telles que <b>, <i>, etc. Cependant, ces balises sont affichées sur la page au lieu de rendre leur comportement.

Par exemple, sur la page, <b> apparaîtrait plutôt en gras. 

Comment puis-je rendre le rendu des balises HTML lorsque la valeur est ajoutée?

Dans mon modèle Django, j’utilise {% autoescape off %}{{content}}{% endautoescape %}. Ainsi, lors du premier chargement de la page, le contenu est correctement rendu en gras, etc.

Merci pour l'aide!

javascripthtmldjango
4
user2573690

Vous pouvez rendre HTML en utilisant document.write () 

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

Mais pour ajouter une chaîne HTML existante, vous devez obtenir l'ID du nœud/balise sous lequel vous souhaitez insérer votre chaîne HTML.

Vous pouvez éventuellement y parvenir de deux manières:

  1. Utilisation de DOM -

    var tag_id = document.getElementById ('tagid'); var newNode = document.createElement ('p'); newNode.appendChild (document.createTextNode ('chaîne html')); node.appendChild (newNode);

  2. Utilisation de innerHTML -

var tag_id = document.getElementById ('tagid'); tag_id.innerHTML ('Chaîne HTML');

J'espère que cela vous aiderait. Merci

2
SS_25

Utilisez $ .parseHTML avant l’ajout de HTML comme

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

Vous devez attribuer un identifiant à une div particulière, puis traiter/modifier l’interface utilisateur dans la div spécifique en conséquence.

Étant donné ici est une excellente explication. 

1
IteratioN7T

Vous pouvez utiliser la fonction document.createRange().createContextualFragment de Javascript:

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