如何让按钮将父 div 克隆到主体上

Question

我正在尝试创建一个按钮，当单击该按钮时，该按钮将克隆按钮父级的父级并附加到正文：

<div class="userposts">

    <p class="postusername">Posted by $postuser</p>

    <script type="text/javascript">

        function click() {

            var div = this.parentElement.parentElement;

            var clone = div.cloneNode(true);

            document.body.appendChild(clone);

        }

    </script>

    <h2 class="posttitle"><button onclick="click()" type="button">$title<button></a></h2>

这是我到目前为止所拥有的，但它没有附加任何内容，也没有留下任何错误消息。

Answer 1

我认为 click() 函数是 JavaScript 中的保留名称，请尝试重命名它。

Answer 2

click未调用函数的原因是属性中的 JavaScript 代码是在将元素的属性复制到属性的 JavaScript 代码的上下文中的上下文中执行的。所以你的click函数隐藏在元素的clickmethod后面。您可以使用任何属性/方法/等重现此效果。按钮 DOM 元素的。例如，单击以下按钮将导致错误：Uncaught TypeError: innerHTML is not a function<script>    function innerHTML(el) {        console.log(el.innerHTML);    }</script><button onclick="innerHTML(this)">Click Me</button>请注意，此效果仅适用于属性字符串内的 JavaScript。如果我们使用与 DOM 元素属性不重叠的函数名称，那么我们可以安全地避免此类错误：<script>    function handleClick(el) {        // We can safely call the innerHTML function from within this function        innerHTML(el);    }    function innerHTML(el) {        console.log(el.innerHTML);    }</script><button onclick="handleClick(this)">Click Me</button>

Answer 3

最好保留干净的 html<h3 class="toClone">Some title <button type="button">[toClone]</button></h3>并在JS函数中使用onclick&nbsp; &nbsp;let butonClone = document.querySelector('button')&nbsp; &nbsp;let myBody = document.querySelector('body')&nbsp; &nbsp;let toClone = document.querySelector('.toClone')&nbsp; &nbsp;butonClone.onclick = function clone() {&nbsp; &nbsp; &nbsp; &nbsp; myBody.append(toClone.parentNode.cloneNode(true))&nbsp; &nbsp;}

Answer 4

最好保留干净的 html<h3 class="toClone">Some title <button type="button">[toClone]</button></h3>并在JS函数中使用onclick&nbsp; &nbsp;let butonClone = document.querySelector('button')&nbsp; &nbsp;let myBody = document.querySelector('body')&nbsp; &nbsp;let toClone = document.querySelector('.toClone')&nbsp; &nbsp;butonClone.onclick = function clone() {&nbsp; &nbsp; &nbsp; &nbsp; myBody.append(toClone.parentNode.cloneNode(true))&nbsp; &nbsp;}使用onclik属性穿上this像这样的功能onclick="clone(this)"获取父节点e.parentNode克隆与cloneNode(true)再见！