在 Javascript 中的触发事件上添加锚标记

Question

我一直在努力将 <a></a> 添加到 html 文档中的 mouseup 或 click 事件。

我的要求是在用户点击 html 页面时在点击部分添加锚标记。

document.documentElement.addEventListener('click', function(e){
  var tgt = e.target;
  if (tgt && tgt.nodeName === 'SPAN') {
    alert(e.target.id);
    tgt.classList.add('strong');
    var randomString = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    alert('#'+randomString);
    var attrHref = '#'+randomString;
    tgt.id.add(randomString);
    tgt.href.add(attrHref);
    var newNode = document.createElement('div');
    //g.setAttribute('id', randomString);
    //alert( e.currentTarget === this );
    var a = document.createElement('a');
    a.href = attrHref;
    alert(a.href);
    //a.setAttribute('href', '#'+randomString);
    //g.appendChild(a);
    alert("afterAppendChild");
    tgt.href = attrHref;
    tgt.insertAdjacentElement("afterbegin", a);
    document.activeElement.insertAdjacentElement("afterbegin", a);
    alert("after insertA");
    alert('done');      
  }
});

在 html 中，我没有可以获取的 DOM 元素中的特定 ID，因此我尝试在用户点击的地方添加 <a></a> 标签。我可以将文本设为粗体但无法添加 <a></a>

请指导我如何实现这一目标。

Answer 1

与许多标签一样，该属性有一个 onclick 事件 (https://www.w3schools.com/jsref/event_onclick.asp)

您希望将 "onclick" 事件添加到所有 A，然后开始： document.getElementsByTagName("a")

它将 return 页面上所有的数组。然后添加监听器： addEventListener('click'.. )

所以你会有这样的东西：

document.getElementsByTagName("a").addEventListener('click',(event) => {
//    YOUR FUNCTION HERE 
// if the user should not be moved to the href add:
// return false
// or use event.preventDefault()
})

Answer 2

我找到了解决方案。下面是源代码。

<script type="text/javascript">
$(document).click(function(e){
  var randStr = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  var attrHref = '#'+randStr;

    var div = $('<div id='+randStr+' class="a-wrapper">')
      .css({
        "left": e.pageX + 'px',
        "top": e.pageY + 'px'
      })
      .append($('<a id='+randStr+' href='+attrHref+'>Link'+randStr+'  </a>'))
      .appendTo(document.body);
      var blob = new Blob([$("html").html()], {type: "text/html;charset=utf-8"});
      saveAs(blob, 'page.html');
    });    
</script>

<style>
body {
  position: relative;
}

.a-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
    opacity: 1;
}
</style>

在 Javascript 中的触发事件上添加锚标记

add anchor tag on triggered event in Javascript

html

javascript

anchor