javascript - createDom エスケープテストを停止する

Question

次のコマンドを使用して、stackTrace 要素にテキストをレンダリングしています

messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));

ただし、「result.trace.stack」をレンダリングすると、コンテンツが二重引用符で囲まれているため、変数に含まれる HTML タグがレンダリングされないと考えられますresult.trace.stack。

などのタグが実際に有効になるように、文字列内の HTML タグをレンダリングする方法はあり<b>text</b>ますか?

アップデート

createTextNodeわかりました。ノードの作成に使用している理由がわかったと思います。

if (typeof child === 'string') {
  el.appendChild(document.createTextNode(child));
} else {
  if (child) {
    el.appendChild(child);
  }
}

score 1 · Accepted Answer

HTML タグを有効にするにはどうすればよいですか?

createDomテキストノードを作成しないように関数を変更できますが、次のinnerHTMLプロパティを使用します。

if (typeof child === 'string') {
  el.innerHTML = child;
} …

プレーンテキストが必要な場合は、次のように、呼び出しでテキストノードを明示的に作成する必要があります。

this.createDom('div', {className: 'stackTrace'}, document.createTextNode(result.plainString))

createDomしたがって、下位互換性を維持したい場合はinnerHTML、使用するかどうかを追加のフラグにする必要があります。

を変更できない場合はcreateDom、次の 2 つの選択肢documentFragmentがありますchild。innerHTMLまたは、結果の要素に明示的にセットを何も渡さない:

var el = this.createDom('div', {className: 'stackTrace'});
el.innerHTML = result.trace.stack;
messagesDiv.appendChild(el);

javascript - createDom エスケープ テストを停止する