删除所有链接并根据点击链接的 ID 添加文本

Question

我需要一些有关 javascript 代码的帮助。我有三个链接，每个链接都有一个不同的 ID，我想要做的是，当我单击其中一个链接时，脚本会获取 ID，然后删除所有三个链接并在该位置放置一个文本，对于示例：

<div id="main">     
    <div>
    <div id="links">
         <a id="choice1" href="#footer" onclick="createDiv();removeLink();">choice1</a>
         <a id="choice2" href="#footer" onclick="">choice2</a>
         <a id="choice3" href="#footer" onclick="">choice3</a>
   </div>
   </div>
</div>

当我点击choice1时，必须删除所有链接并创建一个文本“you clicked in choice1”，如果我点击choice2也会发生同样的情况，但这次显示“you clicked inchoice2”。

我有这个 javascript，具有创建带有文本的 div 的功能和删除链接的功能。但我不知道如何选择 ID 并放置相应的文本。

function createDiv()
{
    var element = document.createElement("div");
    var main = document.getElementById("main");
    main.appendChild(element);
    var text = document.createTextNode("This is the new text");
    element.appendChild(text);  
}
function removeLink()
{
var link = document.getElementById("links");    
    link.parentNode.removeChild(link);
}

我在互联网上进行了很多搜索，但没有找到有效的方法。如果有人可以提供如何做到这一点的提示，我将非常感激。

Answer 1

您可以在父容器（即#links）上设置一个点击监听器，并检查您是否点击了其中一个链接，如果您点击了，请获取 InnerHTML 并替换您的#links div 的 innerHTML。

document.getElementById('links').addEventListener('click',function(event){
  event.preventDefault();
 var target = event.target; 
  if (target.nodeName === 'A'){
      this.innerHTML = 'You clicked on ' + target.innerHTML; 
 }

});

<div id="links">
<a id="id-1" href="google.com">Option 1</a>
<a id="id-2" href="google.com">Option 2</a>
<a id="id-3" href="google.com">Option 3</a>
</div>

Answer 2

您应该使用像 answer 这样的事件侦听器，因为它们通常是一种更好的做法。但是，如果您仍然想要/需要使用onclick，那么您可以使用this 并将其传递给createDiv。所以你的代码看起来像这样：

function createDiv(e)
{
    var element = document.createElement("div");
    var main = document.getElementById("main");
    main.appendChild(element);
    var text = document.createTextNode("you clicked on " + e.innerText);
    element.appendChild(text);  
}
function removeLink()
{
var link = document.getElementById("links");    
    link.parentNode.removeChild(link);
}

<div id="main">     
    <div>
    <div id="links">
         <a id="choice1" href="#footer" onclick="createDiv(this);removeLink();">choice1</a>
         <a id="choice2" href="#footer" onclick="createDiv(this);removeLink();">choice2</a>
         <a id="choice3" href="#footer" onclick="createDiv(this);removeLink();">choice3</a>
   </div>
   </div>
</div>

所有on* 事件作为参数传递事件发生的元素。