JS代码中div的复制怎么实现

Posted 2023-05-07

通过点击 复制按钮 实现对已有div里面所有内容的复制 即又新生成一个一摸一样的div

用cloneNode

定义和用法
cloneNode() 方法可创建指定的节点的精确拷贝。

此方法可返回所复制的节点。

语法：
nodeObject.cloneNode(include_all)参数 描述
include_all 必需。假如逻辑参数被设置为真，那么被克隆的节点会克隆原节点的所有子节点。

返回值
当前节点的副本。

说明
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

返回的节点不属于文档树，它的 parentNode 属性为 null。

当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。 参考技术A <script type="javascript">
function copyInnerhtml(objId)

var obj = document.getElementByID(objId);
window.clipboardData.setData("Text", obj.innerHTML);

</script>
<div id="content001">
<table>
<tr>
<td>Text Here </td>
</tr>
</table>
</div>
<a href="#" onclick='copyInnerHtml("content001");'>复制</a> 参考技术B <script type="text/javascript">function copyText(obj)

var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");

</script>

以下是代码片段：<br />
<br />
<div id="tbid">http://www.951ly.com</div>
[<a href="#" onclick="copyText(document.all.tbid)">点击复制</a>]<br/><br/>
<div id="tbid2">http://www.951ly.com/a/yulebagua/</div>
[<a href="#" onclick="copyText(document.all.tbid2)">点击复制</a>]<br/><br/>

注意ID

怎么能实现div里的滚动条滚动时有动画效果

我用js代码控制scrollTop值，但是滚动效果显得太僵硬了，问下有没有能让滚动条滚动时能柔和一些的方法。

如果你有jquery库的话，就用animate()方法
如果只用原生态的JS,那么就用定时器setInterval追问

公司用的是zepto，但是zepto里的animate好像不支持scrollTop，我试过了。

追答

那就用原生态的setInterval吧。
var timer=setInterval(function()
if(滚完了)

clearInterval(timer)
else

scrollTop+=10;

,30);
这样可以么

参考技术A 你用 JQ 的话一个 .animate() 就搞定了追问

公司用的是zepto，但是zepto里的animate好像不支持scrollTop，我试过了。

参考技术B 你可以使用固定定位啊！