JS w/ HTML DOM Hacks • 2 min read

Home

HTML Hacks

Data Types Hacks

DOM Hacks

JavaScript Hacks

JS Debugging Hacks

%%html

<div>
    <p id="pTag1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.</p>
    <button id="myButton" onclick="switchatags()">Click this</button>
</div>
<br>
<br>
<div>
    <a id="aTag1" href="https://www.google.com/">Google</a>
    <br>
    <a id="aTag2" href="https://chat.openai.com/">ChatGPT</a>
    <p>This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.</p>
</div>

<script>
  function switchatags() {
    var aTag1 = document.getElementById("aTag1")
    var aTag2 = document.getElementById("aTag2")
    var pTag1 = document.getElementById("pTag1")
    var aTag1inside = aTag1.innerHTML
    var aTag2inside = aTag2.innerHTML
    aTag1.innerHTML = aTag2inside
    aTag2.innerHTML = aTag1inside
    var pTag1 = document.getElementById("pTag1")
    pTag1.innerHTML = "switched!"
  }
</script>

This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.

Google
ChatGPT

This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.