Styling a inner.html with CSS

Question

I have used have to change the wording of this CV whenever you click on a button.

function myFunction(){
  document.getElementById("demo").innerHTML= " ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. r";
}

function myFunction2(){
  document.getElementById("demo").innerHTML = " EXPERIENCIA Proin et tortor ut lorem finibus enter image description hereblandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urnas.";
}

function myFunction3(){
  document.getElementById("demo").innerHTML = " ESTUDIOS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum am.";
}

function myFunction4(){
  document.getElementById("demo").innerHTML = " HABILIDADES Proin et tortor ut lorem finibus blandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urna. Duis eget dolor eros.";
}

<div class="text-center">
  <button class="button button1" type="button" onclick="myFunction()">ACERCA DE MI</button>
  <button class="button button2" type="button" onclick="myFunction2()">EXPERIENCIA </button>
  <button class="button button3" type="button" onclick="myFunction3()">ESTUDIOS </button>
  <button class="button button4" type="button" onclick="myFunction4()">HABILIDADES </button>
</div>

<p id="demo"><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">
  ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum euismod orci volutpat fringilla egestas. Etiam pellentesque orci sed risus rhoncus tempor. Cras molestie id turpis ac laoreet. Curabitur vel justo nunc. Maecenas eget ante tincidunt lorem fermentum dapibus non in quam. orem ipsum dolor 
</p>

How can I style the new text that appears with the click of the button? I have no idea how to link the inneHTML to CSS and be able to change the font, size and add space between sentences. Thank you!

how it looks so far. I want to create paragraphs with the text

I tried adding tags to the inner.html but that just breaks the link so far I just styled de

tag in css to forcefully make it as it looks now but it is not enough to change it into paragraphs

Answer 1

Be aware, that your code removed the image within <p> element too.

What you can do, is according to which button was clicked, add a different css class and define a style for it. Simplified, it would look something like this:

<script>
  function myFunction() {
    let element = document.getElementById('demo');
    element.classList = ['style1'];
    element.innerHTML = 'new red inner text';
  }

  function myFunction2() {
    let element = document.getElementById('demo');
    element.classList = ['style2'];
    element.innerHTML = 'new green inner text';
  }
</script>

<style>
  .style1 {
    color: #FF0000;
    font-weight: bold;
  }
  
  .style2 {
    color: #00FF00;
    font-weight: bold;
  }
</style>

<div class="text-center">
  <button class="button button1" type="button" onclick="myFunction()">Button 1</button>
  <button class="button button2" type="button" onclick="myFunction2()">Button 2</button>

</div>

<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow"> <span id="demo">Inner Text </span>
</p>