以下示例

Question

我想创建一个网站，我可以放一些按钮，卡片设计，图像等......当我点击下面的按钮时，我想要复制该材料的源代码。该项目用于更快地访问我在编码时使用的材料，并更快地完成项目。

虽然我已经考虑了一段时间，但我还没找到应该使用哪种方法。如果我想在未来使项目更加复杂，我不想成为我之前使用的错误方法的受害者。如果你能帮助我，我会很高兴的。简而言之，我想要一个按钮，在点击它时复制上面'div'的源代码。

我不是母语人士所以如果我犯了任何语法错误或不完整的句子，我很抱歉。

谢谢。

Answer 1

复制元素的源代码，使用输入相对简单。

1）获取元素outerHtml，将其开头标记中的文本添加到其结尾标记中。

var elemenSourceCode = ele.outerHTML;

2）我们需要一个输入，这个输入可以隐藏在文档中，因为一个就足够了，或者我们可以在js中创建一个将它添加到文档中使用它，然后删除它。

var input = document.createElement('input');

3）我们将元素outerHTML设置为输入值。

input.value = elemenSourceCode;

4）在这里，我们将输入附加到文档中，如前所述，如果您在文档中隐藏了一个，则可以跳过它。

document.body.appendChild(input);

5）我们在输入上调用select()来执行类似选择的用户。

input.select();

6）由于文档中选择了一些文字，我们会调用document.execCommand("copy")复制所选文字。

document.execCommand("copy");

7）现在文本被复制到我们的剪贴板，所以我们不再需要输入。

document.body.removeChild(input);

以下示例

＆＃13;

document.querySelector('.copy').onclick = () => {
  var button = document.querySelector('.Buttondesign');
  CopyElementSourceCode(button);
};

function CopyElementSourceCode(ele) {
  var elemenSourceCode = ele.outerHTML;
  var input = document.createElement('input');
  input.value = elemenSourceCode;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
}

＆＃13;

/* just for reference */

textarea {
  width: 400px;
  height: 100px;
}

＆＃13;

<p><button class="Buttondesign">Button</button></p>
<p><button class="copy">Copy</button></p>
<p><textarea placeholder="try pasting here"></textarea></p>

＆＃13;

隐藏输入示例

＆＃13;

document.querySelector('.copy').onclick = () => {
  var button = document.querySelector('.Buttondesign');
  CopyElementSourceCode(button);
};

function CopyElementSourceCode(ele) {
  var elemenSourceCode = ele.outerHTML;
  var input = document.querySelector('#copyTool')
  input.value = elemenSourceCode;
  input.select();
  document.execCommand("copy");
}

＆＃13;

/* just for reference */

textarea {
  width: 400px;
  height: 100px;
}

＆＃13;

<p><button class="Buttondesign">Button Design To Copy</button></p>
<p><button class="copy">Copy</button></p>
<p><textarea placeholder="try pasting here"></textarea></p>



<!-- it has to be somewhat in there, we can't just use display:none; and that will prevent user select like to happen therefore no copying, i mean you can't select what you can't event see, i'm sure there's a lot of ways to hide the input in the doucument -->
<input type="text" style="position:absolute;width:1px;height:0;padding:0;border:none;" id="copyTool">

＆＃13;

Answer 2

您可以使用previousElementSibling：

var element = document.getElementById('random-element');
console.log(element.previousElementSibling);

<div id="div-1">Hi I'm a div</div>
<p id="random-element">Howdy there</p>

复制另一个元素的源代码

2 个答案:

以下示例

隐藏输入示例