为什么javascript要创建自己的元素？

Question

嘿，我是一名新的web开发人员，正在编写html、css和javascript。我创建了一个"；复制"；按钮复制<p>元素内的文本，并发出文本已复制的警告。

buttons.forEach((copystatus) => {
copystatus.addEventListener('click', (e) => {
const copylatest = e.target.closest(".latestatus").querySelector("p").innerText;
const copyText = document.createElement('textarea');
copyText.style.width = "0";
copyText.style.height = "0";
copyText.style.outline = "none";
copyText.style.border = "none";
copyText.value = copylatest;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
copyalert.style.visibility = "visible"
e.target.closest(".latestatus").querySelector("p").appendChild(copyalert);
setTimeout(function() {
copyalert.style.visibility = "hidden"
}, 700);
})
})

.randomStatusCopyAlert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert show">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>

我的主要意图是在单击相应的<button class="copystatus btn">Copy</button>时使相应的<span class="randomStatusCopyAlert">Copied!</span>可见。虽然代码工作正常，但javascript会创建自己的跨度并显示它。看，我会分享一些照片，这样，如果我做"；。randomStatusPyAlert"；我自己是可见的。[！[请参阅现在跨度已正确放置][1]][1]

现在，跨度已正确放置。当通过上述javascript完成时[！[当我使用html代码检查工具时，跨度改变了位置并进入

元素][2]][2]

跨度位置已更改。[1] ：https://i.stack.imgur.com/aNevS.png[2] ：https://i.stack.imgur.com/b0az4.png

Answer 1

我试图将您的代码复制到一个更简单的结构中，只是为了演示

这是HTML

<div class="statuses-container">
<h2 class="statuses-heading">Latest English Status</h2>
<div class="statuses">
<div class="status">
<p class="status-text">Life is good when you have books</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Google is an open source library by Larry Page and Sergey Brin!</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Cats are better than dogs.</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
</div>
</div>

可以随意更改类名，我更改了它们，因为我发现这样读更容易。一些div被删除了，因为我认为它们对于实现这个结果并不是真正必要的。

请注意，我已经删除了指示文本已复制到剪贴板的跨度。这是没有必要的，因为也许在某个时候你会决定更改消息，并且你必须在任何地方更改它。现在，表示文本被复制的标签将使用JS插入。

这是CSS：

status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}

这里的一些属性也被删除了，因为它们不是必需的。由于我们使用JS动态添加跨度，因此没有必要在开始时隐藏跨度。

这是JS:

var buttons = document.getElementsByClassName('status-copy-btn');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.status');
let textToCopy = statusElement.getElementsByClassName('status-text')[0].innerHTML;

copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}

我已经取下了所有的按钮，并在上面添加了一个click侦听器。当它被点击时，我们获取整个status元素，并在其中获取p元素。我们将p元素的文本传递给copyTextToClipboard函数。这里只有将文本复制到剪贴板所需的逻辑，没有其他内容。

addCopyStatusAlert函数仅用于将新创建的span作为同级添加到按钮。在短暂的超时之后，它将从DOM中完全删除。

这是我在CodePen上为此创建的笔的链接。请随意在那里试用。