如何让按钮将父 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

   let butonClone = document.querySelector('button')

   let myBody = document.querySelector('body')

   let toClone = document.querySelector('.toClone')

   butonClone.onclick = function clone() {

        myBody.append(toClone.parentNode.cloneNode(true))

   }

Answer 4

最好保留干净的 html

<h3 class="toClone">Some title <button type="button">[toClone]</button></h3>

并在JS函数中使用onclick

   let butonClone = document.querySelector('button')

   let myBody = document.querySelector('body')

   let toClone = document.querySelector('.toClone')

   butonClone.onclick = function clone() {

        myBody.append(toClone.parentNode.cloneNode(true))

   }

1. 使用onclik属性

2. 穿上this像这样的功能onclick="clone(this)"

3. 获取父节点e.parentNode

4. 克隆与cloneNode(true)

再见！