How are the html and js codes separated from each other?

Question

function show() {
    var todos = get_todos();

    var html = '<ul>';
    for(var i=0; i<todos.length; i++) {
        html += '<li>' + todos[i] + ' <button class="remove" id="' + i  + '">Delete</button></li>';
    };
    html += '</ul>';

    document.getElementById('todos').innerHTML = html;

    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
}

In this code, I want to separate the 'ul and li' structure on the html page. Could you help me?

The question is too vague. You should consider adding more details to it. — Aniket Sahrawat, Apr 10 '18 at 11:35
Do you mean you want to create the `ul` and `li` in a separate file that has .html extension? — Ahmad Al-kheat, Apr 10 '18 at 11:36
I would like to find out that this example html codes are separate javascript codes from https://code-maven.com/todo-in-html-and-javascript page. Can not do it? — Selin Elibol, Apr 10 '18 at 11:43
I think what you're looking for here is a templating engine, which allows you to load bits of HTML code in JavaScript so you can dynamically create HTML elements without hardcoding the HTML markup into your JavaScript code. Is that it? If so, look up Handlebars.js, or just google "javascript templating" — Máté Safranka, Apr 10 '18 at 11:43
You are definately looking for ``. Here you go: https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html — Aniket Sahrawat, Apr 10 '18 at 11:44

Sravan · Accepted Answer · 2018-04-10T11:59:09.590

Here is want something you can do, if you want some code to html

You can refer the js from html using script tag check the plunker below

You need that script too, because you are adding li dynamically using script

Eg: <script src = "script.js"></script>

Steps:

I have taken a html and created a ul element.
Created a script which appends li to the ul element.
Added a reference to that script using the script tag

function show() {
  var ul = document.getElementById('list');
  var html = '';
  var todos = ["Saab", "Volvo", "BMW"];
  for(var i=0; i<todos.length; i++) {
     var li = document.createElement("li");
    li.appendChild(document.createTextNode(todos[i]));
    ul.appendChild(li);
  };
  ul.append(html);
     var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
}

<!DOCTYPE html>
<html>
<body>
<ul id="list">
</ul>
<p id="demo" onClick="show()">Click ME</p>
</body>
</html>

Please run the above snippet

Here is a working demo for the same

Tomalak · Answer 2 · 2018-04-10T12:36:44.780

I think what you want is an HTML template that you can re-use and keep separate from your JS code. A popular templating engine is handlebars.js.

The steps to get this to work are:

Write a template in your HTML. Using a hidden <div> is one way to do it.
Load the template contents in your JS code.
Compile the template to get a function which will accepts data and returns HTML.
Call that function with your data, assign the result to an existing container element.
Use event delegation to attach behavior to active elements like buttons.

Together this will look like this:

var todoListSource = document.getElementById("todoList").innerHTML;
var todoList = Handlebars.compile(todoListSource);

var items = ["Item 1", "Item 2", "Item 3", "Item 4"];

var todoContainer = document.getElementById("todo");
todoContainer.innerHTML = todoList(items);


// event delegation - use the same event handler for all buttons
// modified from https://stackoverflow.com/a/24117490/18771
todoContainer.addEventListener('click', function (e) {
    if (!e.target.matches('.deleteTodo')) return;

    e.stopPropagation();
    var li = e.target.parentElement;
    li.parentElement.removeChild(li);
});

.template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>

<div id="todo"></div>

<div class="template" id="todoList">
  <ul>
    {{#each .}}
    <li>
      <span>{{.}}</span>
      <button class="deleteTodo">delete</button>
    </li>
    {{/each}}
  </ul>
</div>

Using jQuery you can simplify the JS part.

var todoList = Handlebars.compile($("#todoList").html());

var items = ["Item 1", "Item 2", "Item 3", "Item 4"];

$("#todo").html(todoList(items));

// event delegation - use the same event handler for all buttons
$("#todo").on('click', '.deleteTodo', function (e) {
    e.stopPropagation();
    $(this).closest('li').remove();
});

.template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="todo"></div>

<div class="template" id="todoList">
  <ul>
    {{#each .}}
    <li>
      <span>{{.}}</span>
      <button class="deleteTodo">delete</button>
    </li>
    {{/each}}
  </ul>
</div>

How are the html and js codes separated from each other?

2 Answers2