title: Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation
body: <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>