Question 172688 in Html Question posted in
Some basic documentation can be found here.

Can I add javascript code to HTML?

So I have a html node for some tasks that user can create, when user clicks sort by date I want it to be sorted and changed in the html and other way round but I don’t know how to do the html part, any ideas?

I can do the sorting in JS its really nothing hard but I just don’t know how to apply the sort to html, maybe to store nodes into JavaScript variables and than clear the list of tasks and append child with sorted way?

Tags:

2

Answers


  1. 0

    Create an HTML file with a .html extension (e.g., index.html).
    Open the HTML file in a text editor or an integrated development environment (IDE).
    Within the section of the HTML file, add a tag to include your JavaScript code. You can either write the JavaScript code directly within the tag or reference an external JavaScript file using the src attribute.

    Login or Signup to reply.
  2. 0

    Your input nodes need to be dynamic.
    Ideally, you would use a framework like react which makes doing stuff like that really easy.
    If you’re using vanilla javascript then the easiest way (as you already suggested) would be to

    • Clear the children of the parent node of list using methods like , parent.innerHTML = '' (there are better ways to clear the child nodes of parents, this is not a recommended way due to it not clearing any event listeners the child has)
    • then re-rendering the list items once they have been ordered as per your convenience and appending them to the parent node using, parent.append(child) function

    As an example
    Consider the html to be

    <html>
  <div>
    <ul id="root-list-node">
    </ul>
  </div>
  <div>
    <button id="submit" onclick="submit()">
      order
    </button>
  </div>
</html>

    and the associated js to be

    let listItems = [
    {text: "item1", order: 2},
    {text: "item2", order: 1},
    {text: "item3", order: 3},
]

const renderList = () => {
    const listRoot = document.getElementById("root-list-node")
    listRoot.innerHTML = ''; //clear all children
    const listItemNodes = listItems.map((element) =>{
        // mapping each list item to a new node with <li> tag
        let listItemNode = document.createElement("li")
        listItemNode.textContent = element.text //populating the text in this tag
      return listItemNode
  })
  
  listRoot.append(...listItemNodes) //appending the li node to the ul parent tag

}
window.onload = () => {
    renderList()
}

submit = () => {
    listItems.sort((a,b) => {
    return a.order - b.order
  })
  renderList()
}

    Here the renderList function loads the content in the HTML dynamically based on your listItems by deleting any child node the parent might have and then appending new child nodes, which is first done during onload.
    When you click the button to sort, it sorts the listItems array based on the order property, and then runs renderList again.

    A working js fiddle can be found here https://jsfiddle.net/1Lwqtu8e/20/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search