Поменять местами тексты в html

Хорошо, я сделал много изменений в вашем коде, я не знаю, было ли это именно то, что вы ожидали, но вот оно.
Чтобы добиться желаемого поведения отображения содержимого, соответствующего каждому тексту, когда пользователь щелкает соответствующий элемент, вам потребуется внести некоторые изменения в код HTML и добавить JavaScript.
В этом примере я добавил код для переключения отображения текста, соответствующего нажатой кнопке. Если текст виден, он будет скрыт, и наоборот. Кроме того, я добавил цикл для скрытия всех текстов, кроме текста, соответствующего текущей нажатой кнопке. Благодаря этим изменениям вы можете нажимать кнопки, чтобы отображать и скрывать соответствующий контент.

<style>
  .text {
    display: none;
  }
</style>

<!-- add a class to each button -->
<span class = "btn" data-target = "#text1"><i class = "fa fa-comments" aria-hidden = "true"></i>English</span>
<span class = "btn" data-target = "#text2"><i class = "fa fa-comments" aria-hidden = "true"></i>Swedish</span>

<div class = "content">
  <div id = "text1" class = "text">
    <h1>Welcome</h1>
  </div>
  <div id = "text2" class = "text">
    <h1>Välkommen</h1>
  </div>
</div>

<!-- JavaScript code -->
<script>
  const buttons = document.querySelectorAll('.btn');
  const texts = document.querySelectorAll('.text');

  buttons.forEach(button => {
    let isTextVisible = false;
    button.addEventListener('click', () => {
      // Get button target
      const target = button.getAttribute('data-target');
      const text = document.querySelector(target);
      // Hides all texts except the current text
      texts.forEach(t => {
        if (t !== text) {
          t.style.display = 'none';
        }
      });
      // Shows or hides the text corresponding to the clicked button
      if (isTextVisible) {
        text.style.display = 'none';
        isTextVisible = false;
      } else {
        text.style.display = 'block';
        isTextVisible = true;
      }
    });
  });
</script>

Обновлено: Хорошо, я думаю, что знаю, о чем вы просите. Вы хотите иметь возможность щелкнуть кнопку или что-то еще, чтобы переключить внутренний HTML этих двух div. Вы можете сделать это следующим образом:

<button type = "button" onclick = "toggle()">Click Me!</button
<div class = "content" style = "display: inline;">
  <div id = "text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id = "text2" style = "display: none;">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

Для вашего HTML вы можете поместить свойство onclick непосредственно в верхний div или вы можете поместить его в отдельную кнопку. Это зависит от вас. Для этого я добавил кнопку поверх div, чтобы вы могли переключаться между двумя вариантами. Я также добавил некоторые начальные стили в div, чтобы показать, что происходит.

  const toggle = () => {
  
    let el1 = document.getElementById("text1");
    let el2 = document.getElementById("text2");

    el1.style.display.includes('none') ? el1.style.display = 'inline' : el1.style.display = 'none';
    el2.style.display.includes('none') ? el2.style.display = 'inline' : el2.style.display = 'none';
  }

Это функция JavaScript, которая поменяет местами ваши элементы div. По сути, сейчас мы просто проверяем стиль каждого div, и если он виден, мы делаем его невидимым, а если он не виден, мы делаем его видимым. Используя свойство none, мы гарантируем, что они появятся в одном и том же месте.

Вы можете поместить эту функцию в тег script, и она должна работать! Дайте мне знать, как это происходит.

Я не знаю, правильно ли это, но я добавляю этот ответ на всякий случай.

function onloadtext(){
    document.getElementById("text1").innerHTML = `<h1>Welcome</h1><p>English text</p>`;
}
 const toggle = () => {
  let el1 = document.getElementById("text1");
  let btn = document.getElementById("toggle");
  if (btn.value == 'Swedish'){
    btn.value = 'English';
    el1.innerHTML = `<h1>Välkommen</h1><p>Swedish text</p>`;
  }else{
    btn.value = 'Swedish';
    el1.innerHTML = `<h1>Welcome</h1><p>English text</p>`;
  }
}

<body onload = "onloadtext()">
 Translate in:<input type = "button" id = "toggle" onclick = "toggle()" value = "Swedish">
 <div class = "content">
    <div id = "text1"></div>
 </div>
</body>

Я понимаю, что вместо того, чтобы поменять местами содержимое text1 и text2, вы хотите скрыть одно и сделать видимым другое. Я надеюсь, что приведенный ниже код поможет.

var text1=document.getElementById('text1');
var text2=document.getElementById('text2');

const swap = () => {
  if (text1.classList.contains("hidden")){ //if text1 contains class 'hidden'
    text1.classList.remove("hidden"); //remove hidden class from text1
    text2.classList.add("hidden"); //add hidden class to text2
  }
  else{
    text1.classList.add("hidden"); //add hidden class to text1
    text2.classList.remove("hidden"); //remove hidden class from text2
  }
}

.hidden{
  display:none;
}

<button onclick = "swap()">Switch Text</button>

<div class = "content">
  <div id = "text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id = "text2" class = "hidden">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

Это должно работать.

<div id = "swap-button" style = "cursor: pointer;">Click Me</div>

<div class = "content">
  <div id = "text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id = "text2">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

<script>
  const swapText = () => {
    const text1Element = document.getElementById('text1');
    const text2Element = document.getElementById('text2');
    const text1 = text1Element.innerHTML;
    text1Element.innerHTML = text2Element.innerHTML;
    text2Element.innerHTML = text1;
  };

  document.getElementById('swap-button').onclick = () => {
    swapText();
  };
</script>

Просто добавьте свой значок вместо

<div id = "swap-button" style = "cursor: pointer;">Click Me</div>