How do I replace HTML into the blog title using JavaScript?

Help Customization
1

I made a logo using css and javascript, everything I try to replace the title does not work, e.g. getelementbyID etc… then I try different elements surrounding the blog title and the blog title element itself. It seems to work fine when I replace it with an image, replacing with a single line of HTML and CSS (in style brackets) does not work however.

This is the code I am trying to put as the blog title:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<style>
h1{
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: bold;
font-size: 42px;
color: #000000;
text-decoration: none;
}
.GreenL {
font-family: 'Lato', sans-serif;
text-align: center;
color: #33CC99;
font-weight: bold;
display: inline-block;
font-size: 42px;
animation: blinker 1s linear infinite;
text-decoration: none;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

@keyframes blinker {
  50% {
    opacity: 0;
  }
</style>

<a href="https://writecropley.blog"><h1>Write Crop<div class="GreenL">l</div>ey Blog</h1></a>

Here is some examples of what I tried:

document.write('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"><style>h1{font-family: \'Lato\', sans-serif;text-align: center;font-weight: bold;font-size: 42px;color: #000000;text-decoration: none;}.GreenL {font-family: \'Lato\', sans-serif;text-align: center;color: #33CC99;font-weight: bold;display: inline-block;font-size: 42px;animation: blinker 1s linear infinite;text-decoration: none;}a:link { text-decoration: none; }a:visited { text-decoration: none; }a:hover { text-decoration: none; }a:active { text-decoration: none; }@keyframes blinker {50% {opacity: 0;}</style><a href="https://writecropley.blog"><h1>Write Crop<div class="GreenL">l</div>ey Blog</h1></a>');

2

From this post, this is how I’m targeting the blog title and adding a blinking cursor at the end of it. Maybe you can make use of the script and modify it for your own use.

/* Add blinking cursor to blog title */
const blogTitle = document.getElementById("blog-title");
const blogTitleChildNodes = blogTitle.childNodes;
blogTitleChildNodes[0].innerHTML += '<span class="logo__cursor"></span>';

And instead of using inline CSS, add it to your Custom CSS and target it with an Id or class.

3

This worked, thanks!

4

Good to hear. You’re welcome.