javascript - innerHTML 内的 html 标签

Question

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

失败了。

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

也许没有办法在这种情况下转义 Angular 色。

任何帮助将不胜感激。

[更新]

我是这样解决的。

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

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

Answer 1

1. 您没有关闭a标签<a></a>
2. 还有 innerHTML a的标签为空。所以不可见，但它在您的 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>