innerHTML 内的 html 标记答案

【问题标题】：html tag inside innerHTMLinnerHTML 内的 html 标记
【发布时间】：2024-01-06 11:20:01
【问题描述】：

HTML

<a href="#1" class="current">1</a>    
<div id="xyz"></div>

JavaScript

function updateHash() {
  var number = document.querySelectorAll('.current')[0].innerHTML;
  document.querySelector('#xyz').innerHTML = '<a>'+ number + '</a>';
}
updateHash();

显然，这行得通。

但是，我需要 <a> 成为 <a href="#>

所以当我这样做时：

document.querySelector('#xyz').innerHTML = '<a href="#'+ number + '"</a>';

失败了。

我不知道这是否可以通过转义字符来解决；当我试图逃避 " & # 时，它没有用。

对于这种情况，也许没有办法逃脱角色。

任何帮助将不胜感激。

[更新]

我是这样解决的。

function updateHash() {
  var number = document.querySelectorAll('.current')[0].innerHTML;
  var tag = '<a href=#'    
  document.querySelector('#xyz').innerHTML = tag + number + '>next</a>';
}
updateHash();

其实，我在做和以前一样的事情。但正如所指出的，我没有看到任何输出，因为我的 href 是空的。哈哈

【问题讨论】：

标签： javascript hyperlink escaping innerhtml

【解决方案1】：

你没有关闭a标签<a></a>
而且a 标记的innerHTML 也是空的。所以不可见，但它在您的body 中

你的错误。请检查outerHTML

function updateHash(){
var number = document.querySelectorAll('.current')[0].innerHTML;
document.querySelector('#xyz').innerHTML = '<a href="#'+ number + '"</a>';
console.log(document.querySelector('#xyz').outerHTML)
}
updateHash();

<a href="#1" class="current">1</a>    
    <div id="xyz"></div>

已解决

function updateHash(){
var number = document.querySelectorAll('.current')[0].innerHTML;
document.querySelector('#xyz').innerHTML = '<a href="#'+ number + '">innerhtml is empty</a>';
console.log(document.querySelector('#xyz').outerHTML)
}
updateHash();

<a href="#1" class="current">1</a>    
<div id="xyz"></div>

【讨论】：

哈哈。我什么也没看到，因为我的 innerhtml 是空的。我自己才意识到。非常感谢！！很抱歉发布这么愚蠢的问题。
是的。！它只是初学者问题。继续学习并继续编码...我的答案对你来说已经足够了。将其标记为答案。它对未来的访问者有帮助

【解决方案2】：

使用 jQuery 路由，您可以随时调用 parent() 来获取 HTML（假设父级中没有其他兄弟姐妹：

$('#xyz').html( $('.current').parent().html() )

【讨论】：

我已经用 vanilla/plain javascript 构建了整个东西 (SPA)。不打算添加 jQuery 只是为了添加这一分页。谢谢。
+1 是的，为了方便起见，我通常会使用 jQuery...但是 Vanilla JS 在运行时可以更高效，因为您没有轮询/加载库 *.com/a/11343905/2903486 有一个 parentNode 的示例
哇。我相信这会非常方便。谢谢。