如何将 HTML 元素添加到字符串并即时为我的组件创建元素？答案

【问题标题】：How can I add a HTML element to a string and create the element to my component on the fly?如何将 HTML 元素添加到字符串并即时为我的组件创建元素？
【发布时间】：2020-10-28 16:23:41
【问题描述】：

所以基本上我正在尝试使我的组件尽可能通用，并且我正在尝试通过使用 innerHtml 属性从字符串中提取它来动态创建一个<a> 标记。我的组件属性在 conf.js 文件中设置。问题是我得到了这个字符串，而不是这个字符串 'Have you tyied our new dark theme?<a href="www.google.com">Text link</a>'：

"Have you tyied our new dark theme?&lt;a href=&quot;www.google.com&quot;&gt;Text link&lt;/a&gt;".

如何获取确切的字符串，以便使用 innerHtml 属性生成我的<a>？我试过在

【问题讨论】：

您应该在问题中包含导致转义 HTML 字符串的代码。
您不是在寻找dangerouslySetInnerHTML 的房产吗？
@Salah 不，该属性是正确的。我只需要转义字符。如果我从 conf.js 文件中移动父组件中的字符串，它就可以正常工作。

标签： javascript innerhtml

【解决方案1】：

我不确定错误出在哪里，因为您没有提供任何代码，但我认为这就是您所需要的..

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    
</head>
<body>
    <span id="display"></span>
</body>

<script type="text/javascript">
    const link = 'Have you tried our new dark theme? ' + '<a href="www.google.com">Text link</a>';
    document.getElementById('display').innerHTML = link;
</script>
</html>

希望对你有帮助

【讨论】：

【解决方案2】：

问题出在服务器端，它正在转义提到的字符。我想出的解决方案是这样的

replaceCharacters(str:String):String {
str = str.replace(/&lt;/gi, '<');
str = str.replace(/&gt;/gi, '>');
str = str.replace(/&quot;/gi, '"'); 
return str;}

我在 html 中这样做

[announcement]="replaceCharacters(liveBanner.announcement)"

感谢您拨出时间来帮助我。

【讨论】：