How to render HTML file using JavaScript

Question

I have visited this and this but they are quite different from my approach. I am creating a widget for sisense using javascript.

MyWidget.js

render: function (widget, args) {
  console.log("My calendar widget");

  var element = $(args.element);
  element.empty();

  var myText='<p>hello</p>';  <----------I WANT TO REPLACE THIS WITH HTML FILE

  // Add to the DOM
  element.append(myText);
}

And the HTML file is styler.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Date Picker</title>
</head>
<body>
    <h1>CUSTOM<span>DATE</span>PICKER</h1>
    <div class="date-picker">
        <div class="selected-date"></div>
        <div class="dates">
            <div class="month">
                <div class="arrows prev-mth">&lt;</div>
                <div class="mth"></div>
                <div class="arrows next-mth">&gt;</div>
            </div>
            <div class="days"></div>
        </div>
    </div>
</body>
</html>

I am new in javascript. Please tell me how to do it. I'm not sure Is it even possible or not.

I also tried doing with a string:

var myText='<h1>CUSTOM<span>DATE</span>PICKERs</h1>'
                        +'<div class=date-picker></div>'
    +'<div class=selected-date></div>';
    +   '<div class=dates>'
    +       '<div class=month>'
    +           '<div class=arrows prev-mth>&lt;'
    +           '</div>'
    +           '<div class=mth>'
    +           '</div>'
    +           '<div class="arrows next-mth">&gt;'
    +           '</div>'
    +       '</div>'
    +   '<div class=days>'
    +   '</div>'
    +   '</div>'
    +'</div>';

I think you get something wrong in HTML. Can you show how you'd like the final `HTML` to be? — apple apple, Oct 20 '19 at 14:25
I think you to research tutorials rather than asking on here. — evolutionxbox, Oct 20 '19 at 14:25
You can `fetch` that file. Something like that https://stackoverflow.com/q/36631762/863110 — Mosh Feu, Oct 20 '19 at 14:27
Or if a fetch is not what you want, just put the html in a string? — evolutionxbox, Oct 20 '19 at 14:30
@evolutionxbox. I tried doing that also. But there are so many tags that it looks very messed up and the code reviewer wasn't very happy with that style of coding. — Tanzeel, Oct 20 '19 at 14:31
Why not talk to your code reviewer about how to approach this? — evolutionxbox, Oct 20 '19 at 14:32
@evolutionxbox Many people don't have a *code reviewer*. Try to keep comments constructive — charlietfl, Oct 20 '19 at 14:34
@charlietfl I’m aware of this. The answers to this question are vast and opinionated. If the OP has a code reviewer they should communicate and think of a solution that works for them. — evolutionxbox, Oct 20 '19 at 14:36
@evolutionxbox. But Sir i cannot create a string. Please suggest some other approach. — Tanzeel, Oct 20 '19 at 14:39

How to render HTML file using JavaScript

0 Answers0