Initialization/stringsElement issue with HTML elements

[frzsombor]

After reviewing the config properties and the code, I expected that it is possible to simply use a HTML element (as a variable) to initialize the library and also pass this element to the stringsElement config property to keep everything dynamic. However, it seems like typed.js can not use and animate an already existing element, as this is not working:

<!-- Element to contain animated typing -->
<span id="element">Hello world!</span>

<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

<!-- Setup and start animation! -->
<script>
  var el = document.getElementById('element');
  var typed = new Typed(el, {
    stringsElement: el,
    typeSpeed: 60
  });
</script>

I also really don't get it, why the following is not working either:

var el = document.getElementById('element');
var typed = new Typed(el, {
  strings: [ el.innerHTML ],
  typeSpeed: 60
});

[frzsombor]

I figured out the issue is that simply the library is not working if the target element is not a completely empty element.
The following code works, but I think this should be built in and/or handled without any issue or at least with a warning.

var el = document.getElementById('element');
var strings = [ el.innerHTML ];
el.innerHTML = '';
var typed = new Typed(el, {
  strings: strings,
  typeSpeed: 60 
});

Even better solution (to keep text AND cursor in the element):

var el = document.getElementById('element');
var textWrapper = document.createElement('span');
var strings = [ el.innerHTML ];
el.innerHTML = '';
el.appendChild(textWrapper);
var typed = new Typed(textWrapper, {
  strings: strings,
  typeSpeed: 60 
});