how could I animate innerHTML

Question

I am looking to animate the text, "This is NOT allowed" below.

 document.getElementById("ve").innerHTML = '<p  style="text-align:center"><h1><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

Unfortunately my situation is I have to use innerHTML in a java script. There is no HTML page. A java script dynamically generates HTML so I dont have access to HTML page. I want to animate the text either fade-in or some simple bounce. Because it is a javascript file I dont have access to css file (or am I wrong?). I am looking for less code and very simple mechanism.One idea is I can simulate blinking by copy-pasting showing innerHTML, setting it to "", and showing again every 1 second. Is there any elegant way? I cannot use any javascript framework like jQuery.

Note*: I copy pasted the code to assign the value to innerHTML, and set it to "" every 2 seconds, the blinking effect is not happening. So that option is ruled out, I guess. Am a UI nube with extensive backend experience :(

Edit** I have decided to go with @JoshB answer. It works and is much cleaner. The HTML tags and animation are clearly separated. I am targeting people with some medical conditions. Me being a 0/10, I want simpler dumbed down solution. Thanks for your help.

Hi, what kind of animation do you want to do? Have you create the element 've'? — Roberto Vargas, Jun 17 '20 at 01:05
You can do such animations with css-transitions. If you can't use a css-file, you can add css rules with javascript. — Patrick, Jun 17 '20 at 01:20
@RobertoVargas: my audience is elder people who see high-contrast colors.Hence animation but without distraction. Anything that shakes/moves the text a little like 25px is good. I managed div show-hide-show-hide pattern every 2 seconds but the solution is not elegant enough. My audience most likely will miss seeing text if it is hidden. May be I can show text on yellow background but a little movement will attract attention of my audience. — Flat Screen, Jun 17 '20 at 01:36
use css, https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3 — Lawrence Cherone, Jun 17 '20 at 01:38
@Patrick I saw some css animations https://www.html.am/html-codes/marquees/css-marquee.cfm but how should I add such complex css inline in innerHTML? — Flat Screen, Jun 17 '20 at 01:39

score 4 · Answer 1 · answered Jun 17 '20 at 01:45

You can actually just change the appearance of the text through DOM CSS in JavaScript. I decided the simpliest method was to make a loop with setTimeout to achieve the end goal.

<!DOCTYPE html>
<html>
<head>
 <title>TEST</title>
</head>
<body>
<p id="ve">Example Text</p>
<script>
 state = "off";
 function blinkText() {
  if (state == "on") {
   state = "off";
   document.getElementById("ve").style.visibility = "visible";
   setTimeout(blinkText, 1000);
  } else {
   state = "on";
   document.getElementById("ve").style.visibility = "hidden";
   setTimeout(blinkText, 1000);
  }
 }
 blinkText();
</script>
</body>
</html>

This basically turns on and off the visibility of the text every second. The time, in milliseconds, can be modified through the second parameter in the setTimeout function. I hope this helps you out with your problem!

Yes, this works perfectly well. Much cleaner than my clunky code. — Flat Screen, Jun 17 '20 at 03:55

score 0 · Answer 2 · answered Jun 17 '20 at 01:34

You're allowed to add lots more stuff to your innerHTML.

For example, if you wanted to add a fade-in effect, you would start with the text set to invisible using "opacity: 0"
Also you'd add a transition in preparation for that value to change using "transition: opacity 1s".
Then, you'd use javascript to get a reference to that DOM node. Once you have a reference to that DOM node, you would change the value of the opacity by changing the node's style.opacity value.

Put together, it would look like:

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("ve").innerHTML = '<p style="text-align:center"><h1 id="fadein" style="opacity: 0; transition: opacity 1s"><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

  const fadein = document.getElementById("fadein");
  setTimeout(() => {
    fadein.style.opacity = "1";
  }, 0);
});

The reason for the timeout has to do with the order that the page is rendered and the order in which javascript code is run.

I uncommented my code and used yours. It is not working, even though I think it should. I am not able to copy-paste both the code here because of size. — Flat Screen, Jun 17 '20 at 02:03
does document.getElementById("ve") return a reference on your html page? — Pengling Wu, Jun 17 '20 at 04:09

how could I animate innerHTML

2 Answers2