时间戳

首页 > 解决方案 > 解析 html 标签以在 javascript 中显示为真正的 html 组件

javascript - 解析 html 标签以在 javascript 中显示为真正的 html 组件

问题描述

我正在尝试显示

<br><br><a href='http://www.google.com' target='_blank'><button>Click me !</button></a>

作为一个真正的 HTML 组件，但它一直显示为文本，我尝试使用DomParser如下所示的

function test() {
  var str = "<br><br><a href='http://www.google.com' target='_blank'><button>Click me !</button></a> ";
  var parser = new DOMParser();
  var doc = parser.parseFromString(str, 'text/html');
  tt.outerHTML = str;
  console.log(doc.body);
  return doc.body;
}

但它显示像这样的文本“[object HTMLBodyElement]”而不显示组件！

标签： javascripthtml

解决方案

如果要将 HTML 字符串显示为文本，请不要使用 outerHTML，而是使用 textContent

你的意思是

function test() {
  var str = "<br><br><a href='http://www.google.com' target='_blank'><button>Click me !</button></a> ";
  var parser = new DOMParser();
  var doc = parser.parseFromString(str, 'text/html');
  console.log(doc.body);
  return doc.body.innerHTML;
}
document.getElementById("tt").textContent = test()
<div id="tt"></div>

或者如果你想显示按钮，那么你需要将innerHTML复制到innerHTML

function test() {
  var str = "<br><br><a href='http://www.google.com' target='_blank'><button>Click me !</button></a> ";
  var parser = new DOMParser();
  var doc = parser.parseFromString(str, 'text/html');
  console.log(doc.body);
  return doc.body.innerHTML;
}
document.getElementById("tt").innerHTML = test()
<div id="tt"></div>

推荐阅读