Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation
<p>Highly possible that I have error logic but I'm just learning both JavaScript and Jekyll.</p>

<p>My goal is to manipulate an HTML element through JavaScript and place some Jekyll variable inside the inner HTML of that element. Everything is loading from a local development directory with <code>jekyll serve</code>. I tried the following:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Something&lt;/h2&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>document.addEventListener("DOMContentLoaded", function () {
    manipulate = document.getElementsByTagName("h2");
    manipulate[0].innerHTML = "{{ page.title }}";
});
</code></pre>

<p>Structure:</p>

<pre><code>├── _config.yml
├── contact-us.md
├── css
│   └── main.scss
├── feed.xml
├── _includes
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   ├── readtime.html
│   └── sidebar.html
├── index.html
├── js
│   ├── anchor.js
│   └── tags.js
├── _layouts
│   ├── default.html
│   ├── page.html
│   ├── post.html
│   ├── single.html
│   └── tags.html
├── _posts
├── readme.md
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── _site
│   └── [...]
└── tags.md
</code></pre>

<p>I reached the <strong><em>tags.js</em></strong> from the <strong><em>tags.md</em></strong></p>

<p>For example, if my page's title would be "foo", then I assumed the following HTML output in the <code>&lt;h2&gt;</code> tag (<strong>this was my goal</strong>):</p>

<pre><code>&lt;h2&gt;foo&lt;/h2&gt;
</code></pre>

<p>But <strong>instead</strong> it gave me the following:</p>

<pre><code>&lt;h2&gt;{{ page.title }}&lt;/h2&gt;
</code></pre>

<p>I think it happened cause jekyll renders the values of the variables inside the jinja format and gives us the output, and after that I just placed the string <code>"{{ page.title }}"</code> to the <code>&lt;h2&gt;</code> tag.</p>

<p>I'm sure I'm missing something, but if you used something like that in one of your project, I'd appreciate any help.</p>