首頁猿問嘗試同時添加...

嘗試同時添加 appendChild 和 removeChild

JavaScript

慕容3067478 2022-12-22 09:03:03

$('#submit').on('click', function(){ $.ajax({ type:'GET', url:'http://www.boredapi.com/api/activity/', success: function(data){// my data console.log(data); console.log(data.activity); var body = document.getElementById('add'); var newDiv = document.createElement('div'); newDiv.innerText = data.activity; console.log(newDiv); //my data console.log(body); var num = 0; body.appendChild(newDiv); $('#submit').on('click', function(){ body.removeChild(newDiv); }) } })})我試圖通過單擊添加一個 div，然后單擊第二次刪除第一個 div 并在其位置添加一個新的 div?，F在，我想出了一種方法，讓另一個 eventListner 進行第二次“點擊”，刪除第一個 div 并添加第二個，但第三次點擊它會立即返回到每次點擊時存儲每個 div。我認為兩個 eventListner 之間的循環將起作用，但不確定如何使其在邏輯上起作用。我希望我已經解釋得夠清楚了。預先感謝您的幫助。

查看完整描述

4 回答

搖曳的薔薇

TA貢獻1793條經驗獲得超6個贊

在這種情況下，您可以使用replaceWith()：例如：

var body = document.getElementById('add');

var newDiv = document.createElement('div');

var old_div = document.querySelectorAll('#add>div') !== null;

if(!old_div){

body.appendChild(newDiv);

} else {

old_div.replaceWith(newDiv);

}

如果第三行無法理解，請參閱此處。

總的來說，你的代碼看起來像這樣：

$.ajax({

type:'GET',

url:'http://www.boredapi.com/api/activity/',

success: function(data){// my data

console.log(data);

console.log(data.activity);

var body = document.getElementById('add');

var newDiv = document.createElement('div');

var old_div = document.querySelectorAll('#add>div') !== null;

newDiv.innerText = data.activity;

if(!old_div){

body.appendChild(newDiv);

} else {

old_div.replaceWith(newDiv);

}

})

}

})

*注意：- success、error、complete 已從 3.0 版中刪除。參考資料

反對回復 2022-12-22

忽然笑

TA貢獻1806條經驗獲得超5個贊

您需要在刪除 div 之前檢查它是否存在。第一次提交表單時沒有 div，因此將創建它，然后綁定新的點擊事件。然后，當您再次單擊該 div 時，該 div 已經存在，因此您將再次創建它，然后再刪除前一個。我建議你在創建 div 的時候給它添加一個 id

我會做：

$('#submit').on('click', function () {

$.ajax({

type: 'GET',

url: 'http://www.boredapi.com/api/activity/',

success: function (data) {

var body = $('#add');

if($('#NewDiv')){

body.removeChild($('#NewDiv'))

}

// my data

console.log(data);

console.log(data.activity);

var newDiv = $(document.createElement('div'));

newDiv.attr('id', 'NewDiv');

newDiv.innerText = data.activity;

console.log(newDiv); //my data

console.log(body);

var num = 0;

body.appendChild(newDiv);

}

})

反對回復 2022-12-22

慕妹3146593

TA貢獻1820條經驗獲得超9個贊

$('#submit').on('click', function(){

$.ajax({

type:'GET',

url:'http://www.boredapi.com/api/activity/',

success: function(data){// my data

console.log(data);

console.log(data.activity);

var body = document.getElementById('add');

var newDiv = document.createElement('div');

newDiv.innerText = data.activity;

console.log(newDiv); //my data

console.log(body);

$("#add").empty()

body.appendChild(newDiv);

}

反對回復 2022-12-22

慕工程0101907

TA貢獻1887條經驗獲得超5個贊

這是一個關于如何使用點擊刪除和附加 div 的解決方案，我添加了一個計數器來演示更改，您可以使用此解決方案來滿足您的需要

let body = document.getElementById('add');

let olddiv = document.getElementById('olddiv');

let divs=document.getElementsByClassName("div");

flag = false

counter = 0

$('#submit').on('click', function() {

if (!flag) {

addiv(counter)

console.log("divadded ",divs)

counter++

flag = true

} else {

addNewDiv(counter)

counter++

flag = false

}

})

function addiv(counter) {

while (body.hasChildNodes()) {

body.removeChild(body.firstChild);

}

var newDiv = document.createElement('div');

newDiv.id = `olddiv${counter}`

newDiv.className = "div"

newDiv.innerText = counter;

body.appendChild(newDiv);

}

function addNewDiv(counter) {

while (body.hasChildNodes()) {

body.removeChild(body.firstChild);

}

addiv(counter)

console.log("removed",divs)

}

<button id="submit">changeDiv</button>

反對回復 2022-12-22

4 回答
0 關注
155 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

嘗試同時添加 appendChild 和 removeChild

嘗試同時添加 appendChild 和 removeChild

4 回答

添加回答