javascript - 如何使用 javascript 创建一个 span 元素本身？

Question

嘿，我是 javascript 新手，但尽我所能编写了一个 javascript 来复制<p></p>元素内的文本。我已经完全编写了代码，但我的问题是我必须重复创建 span 元素。所以任何人都可以帮助我。我的 javascript

document.addEventListener('DOMContentLoaded',()=>{

  const createtextbox=function(text){
    let el=document.createElement('textarea');
      el.style.position = 'fixed';
      el.style.left = '0';
      el.style.top = '0';
      el.style.opacity = '0';
      el.value = text;
    document.body.appendChild(el);
    return el;
  };

  const shortmessage=function(e,m,t){
    let span=e.parentNode.querySelector( 'span' );
      span.innerText=m;
    setTimeout(()=>{span.innerText=''},700 * t)
    span.classList.add("copystatusalert");
     setTimeout(function() {span.classList.remove("copystatusalert")},700);
  };

  const copytoclipboard=function(e){
    // create the hidden textarea and add the text from the sibling element
    let n=createtextbox( this.parentNode.querySelector('p').innerHTML );
      n.focus();
      n.select();
    document.execCommand('copy');
    document.body.removeChild(n);

    // flash a message in the SPAN-clear after 2s
    shortmessage( this, 'Copied!', 0.7 );
  };

  /*
    Find a reference to ALL buttons that are used to copy
    text from a sibling element and assign an event handler 
    to process every button click.
  */
  document.querySelectorAll('button.copystatus').forEach( bttn=>{
    bttn.addEventListener( 'click', copytoclipboard )
  });
})

我的html

<div class='englishstatus'>
  <div class='car'>
    <div class='latestatus'>
      <p>Life is good when you have books</p> 
      <button class='copystatus btn'>Copy</button>
      <span></span>
    </div>
    <div class='latestatus'>
      <p>Google is a open source library by Larry Page and Sergey Brin!</p>
      <button class='copystatus btn'>Copy</button>
      <span></span>
    </div>
  </div>
  <div class='car'>
    <div class='latestatus'>
      <p>Cats are better than dogs.</p>
      <button class='copystatus btn'>Copy</button>
      <span></span>
    </div>
    <div class='latestatus'>
      <p>Ferrets are better than rats</p>
      <button class='copystatus btn'>Copy</button>
      <span></span>
    </div>
  </div>
</div>

如您所见，我需要重复创建跨度元素，因此任何人都可以帮助我，以便它可以创建自己的跨度元素。先感谢您。

标签： javascripthtmlscriptingdynamic-programmingdynamic-html

Answer 1

我已经修改了您的 JS 代码，并通过动态添加 span 元素将其直截了当。您可以重构它，根据需要将代码片段分成不同的功能。我只想在这里直接说明实现逻辑。

const buttons = document.querySelectorAll('.copystatus.btn');

buttons.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    const quote = e.target.previousElementSibling.innerText;
    
    const copyText = document.createElement('textarea');
    copyText.value = quote;
    
    document.body.appendChild(copyText);
    copyText.select();
    document.execCommand('copy');
    document.body.removeChild(copyText);
    
    
    const span = document.createElement('span');
    span.textContent = 'copied';
    e.target.parentElement.appendChild(span);
    setTimeout(()=> {
        span.remove();
    }, 700)
    
  })
})

<div class='englishstatus'>
  <div class='car'>
    <div class='latestatus'>
      <p>Life is good when you have books</p>
      <button class='copystatus btn'>Copy</button>
    </div>
    <div class='latestatus'>
      <p>Google is a open source library by Larry Page and Sergey Brin!</p>
      <button class='copystatus btn'>Copy</button>
    </div>
  </div>
  <div class='car'>
    <div class='latestatus'>
      <p>Cats are better than dogs.</p>
      <button class='copystatus btn'>Copy</button>
    </div>
    <div class='latestatus'>
      <p>Ferrets are better than rats</p>
      <button class='copystatus btn'>Copy</button>
    </div>
  </div>
</div>