如何使用javascript中的類將div替換為另一個div？

我需要一個 JavaScript 函式，它允許從幾個 div 中只選擇兩個 div 并將它們分別插入到其他 div 中。

<div class="item" id="arg1">first block</div>
<div class="item" id="arg2">second block</div>
<div class="item" id="arg3">third block</div>

<div class="item2">put the first block <div class="main_place">here</div> and the second one <div class="main_place">here</div>.</div>

我在 stackoverflow 上看到了一個解決方案（如何在 javascript 中用另一個 div 替換 div？），但這并沒有解決我的問題。順便說一句，如果我必須創建一個按鈕，我希望專案 div 本身是一個

function show(param_div_id) {
  document.getElementById('main_place').innerHTML = 
  document.getElementById(param_div_id).innerHTML;
}

uj5u.com熱心網友回復：

如果您希望它僅從 div 中選擇兩個，您可以使用輸入型別單選，然后執行您在另一篇文章中看到的解決方案。您可以通過對其執行“顯示：無”來重新設計它以使其看起來像一個按鈕（或其他任何東西）。確保為其添加標簽，以便您可以添加文本并使其更具可定制性。希望這會有所幫助。

uj5u.com熱心網友回復：

如果要一次查詢多個元素，可以使用querySelectorAll()

更換元件，好像要一一更換

function show(ids) {
  let params = ids.split(',').map(p => '#' p).join(',')
  divs = document.querySelectorAll(params)
  
  let targets = document.querySelectorAll('.main_place')
  for(let i=0;i<targets.length;i  ){
    let target = targets[i];
    target.innerHTML = divs[i].innerHTML.bold()
  }
}

<div class="item" id="arg1">first block</div>
<div class="item" id="arg2">second block</div>
<div class="item" id="arg3">third block</div>
<hr>
<div class="item2">put the first block <div class="main_place">here</div> and the second one <div class="main_place">here</div>.</div>
<button onclick = "show('arg1,arg2')">Test Button</button>

uj5u.com熱心網友回復：

.forEach()您可以通過呼叫以多種方式執行此操作：

const items = document.querySelectorAll('.item');
document.getElementById('btn').addEventListener('click', () => {
  document.querySelectorAll('.main_place').forEach((el, i) => {
    if (i > items.length-1) return;
    el.innerHTML = items[i].innerHTML;
    items[i].remove();
  });
});

<div class="item">first block</div>
<div class="item">second block</div>
<div class="item">third block</div>

<br>
<div class="item2">put the first block
  <div class="main_place">here</div>
  and the second one
  <div class="main_place">here</div>
  .
</div>

<button id="btn">Replace divs</button>

具有該類的每個元素item都將按main_place順序替換為具有該類的相應元素。如果您在類中添加更多元素main_place，則將替換更多具有該類的元素item。

如果main_place類中的元素比類中的元素多items，則其余部分不會被任何東西替換。

或者，如果您不想在替換原始元素時洗掉它們，您需要做的就是洗掉.remove()呼叫。像這樣：

const items = document.querySelectorAll('.item');
document.getElementById('btn').addEventListener('click', () => {
  document.querySelectorAll('.main_place').forEach((el, i) => {
    if (i > items.length-1) return;
    el.innerHTML = items[i].innerHTML;
  });
});

<div class="item">first block</div>
<div class="item">second block</div>
<div class="item">third block</div>

<br>
<div class="item2">put the first block
  <div class="main_place">here</div>
  and the second one
  <div class="main_place">here</div>
  .
</div>

<button id="btn">Replace divs</button>

標籤：javascripthtml功能代替

上一篇：我收到此錯誤：TypeError:'<'在'str'和'float'的實體之間不支持

下一篇：新的類實體，直到在JS中滿足條件