我正在嘗試創建一個按鈕，當單擊該按鈕時，該按鈕將克隆按鈕父級的父級并附加到正文：<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>這是我到目前為止所擁有的，但它沒有附加任何內容，也沒有留下任何錯誤消息。
4 回答
12345678_0001
TA貢獻1802條經驗 獲得超5個贊
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>
FFIVE
TA貢獻1797條經驗 獲得超6個贊
最好保留干凈的 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))
}
慕村225694
TA貢獻1880條經驗 獲得超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))
}
使用
onclik屬性穿上
this像這樣的功能onclick="clone(this)"獲取父節點
e.parentNode克隆與
cloneNode(true)
再見！
- 4 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消