在JS中使用內部HTML切換段落-有解無憂

單擊按鈕后，我試圖切換兩個段落，但我被卡住了。有什么方法可以在不使用 IF 或布林值的情況下使用內部 HTML 來做到這一點？我試過這段代碼，但它不起作用。謝謝

let elmsButton = document.querySelectorAll("button")[0];
let elmsParagraf1 = document.querySelectorAll(".prvni")[0];
let elmsParagraf2 = document.querySelectorAll(".druhy")[0];

elmsButton.addEventListener("click", () => {
    elmsParagraf1.innerHTML = "<div class='druhy'></div>"
    elmsParagraf2.innerHTML = "<div class='prvni'></div>"
});

uj5u.com熱心網友回復：

將每個DOM.innerHTML段落分配給一個variable然后交換它們，如下例所示：

let elmsButton = document.querySelectorAll("button")[0];
let elmsParagraf1 = document.querySelectorAll(".prvni")[0];
let elmsParagraf2 = document.querySelectorAll(".druhy")[0];

elmsButton.addEventListener("click", () => {
    const p1 =  elmsParagraf1.innerHTML;
    const p2 =  elmsParagraf2.innerHTML
    elmsParagraf1.innerHTML = p2;
    elmsParagraf2.innerHTML = p1
});

<button>Click</button>
<div class='prvni'>Paragraph 1</div>
<div class='druhy'>Paragraph 2</div>

uj5u.com熱心網友回復：

您可以通過創建一個保存 Paragraf1 的臨時變數來切換這兩個 div，然后將 Paragraf1 更改為 Paragraf2，反之亦然，但使用變數。

    let temp = elmsParagraf1.innerHTML;
    elmsParagraf1.innerHTML = elmsParagraf2.innerHTML
    elmsParagraf2.innerHTML = temp

uj5u.com熱心網友回復：

為什么不使用querySelector代替使用querySelectorAll并選擇第一個元素？

順便說一句，我建議從父元素中洗掉并重新添加元素，而不是使用innerHTML. 使用innerHTML不會保留聽眾并且表現更差：

let elmsButton = document.querySelector("button");
let elmsParagraf1 = document.querySelector(".prvni");
let elmsParagraf2 = document.querySelector(".druhy");

elmsButton.addEventListener("click", () => {
    swapElements(elmsParagraf1, elmsParagraf2);
});

function swapElements(elem1, elem2) {
  // Check if siblings
  if (elem1.parentElement !== elem2.parentElement) {
    console.error('No sibling elements!');
    return;
  }
  elem1.replaceWith(elem2.cloneNode(true));
  elem2.replaceWith(elem1.cloneNode(true));
}

例子：

顯示代碼片段

let elmsButton = document.querySelector("button");

elmsButton.addEventListener("click", () => {
    let elmsParagraf1 = document.querySelector(".prvni");
    let elmsParagraf2 = document.querySelector(".druhy");
    swapElements(elmsParagraf1, elmsParagraf2);
});

function swapElements(elem1, elem2) {
  // Check if siblings
  if (elem1.parentElement !== elem2.parentElement) {
    console.error('No sibling elements!');
    return;
  }
  elem1.replaceWith(elem2.cloneNode(true));
  elem2.replaceWith(elem1.cloneNode(true));
}

<button>Click me</button>

<div class="prvni">I am the first div</div>
<div class="druhy">I am the second div</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478663.html

標籤：javascript

上一篇：使用Javascript計算字串中僅字符（而非符號）的字串長度

下一篇：如何在打字稿中匯入嵌套介面