如何制作一个跨度，单击 link 将被覆盖，以便 link 位于跨度的右侧？

Question

我需要在跨度的右侧创建一个 link，并通过单击 link 使该跨度上划线。

主要问题是 link 和 span 都有上划线，我不知道如何解决。另一个问题是它们不能通过宽度来证明，因为它们看起来在一起。

我尝试将 insertAdjacentElement 的 beforeend 属性改为 afterend，但它使 link 出现在每个 span 下，这实际上不是我想要的。

提前致谢！

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span>${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

Answer 1

那是因为您将 overlined class 应用于 p 元素，该元素还包含您的 cross link。使用 p 的 children[0] 或 firstChild 将其应用于 span。

我还建议在您的 span 和 a 标签中添加一些 css classes 以便您可以根据需要设置它们的样式。

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span class="mySpan">${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';
  a.classList.add("myLink");

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.firstChild.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

.overlined {
  text-decoration: line-through;
}

.mySpan {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
}

.myLink {
  color: green;
  display: inline-block;
}

<p>test</p>
<p>test 2</p>

如何制作一个跨度，单击 link 将被覆盖，以便 link 位于跨度的右侧？

How to make a span, which will be overlined by clicking the link, so that the link will be to the right of the span?

html

javascript

dom

nodes

dom-events