Saturday, 15 September 2018

HTML String via jQuery append

I want to generate following HTML string using jQuery append. Writing code manually looks too cumbersome to me.

 <div>

    <label>Name (Optional)</label>
    <input type='text' class='form-control' id='job-name'/><br />

    <label>Quick Schedule</label><br />

    <a class="btn btn-primary" onclick="schedule = '@hourly'; job_string();">Hourly</a>
    <a class="btn btn-primary" onclick="schedule = '@daily'; job_string();">Daily</a>
    <a class="btn btn-primary" onclick="schedule = '@weekly'; job_string();">Weekly</a>
    <a class="btn btn-primary" onclick="schedule = '@monthly'; job_string();">Monthly</a>
    <a class="btn btn-primary" onclick="schedule = '@yearly'; job_string();">Yearly</a><br /><br />

    <div class="row">
        <div class="col-md-2">Minute</div>
        <div class="col-md-2">Hour</div>
        <div class="col-md-2">Day</div>
        <div class="col-md-2">Month</div>
        <div class="col-md-2">Week</div>
    </div>

    <div class="row">
        <div class="col-md-2"><input type="text" class="form-control" id="job-minute" value="*" onclick="this.select();"/></div>
        <div class="col-md-2"><input type="text" class="form-control" id="job-hour" value="*" onclick="this.select();"/></div>
        <div class="col-md-2"><input type="text" class="form-control" id="job-day" value="*" onclick="this.select();"/></div>
        <div class="col-md-2"><input type="text" class="form-control" id="job-month" value="*" onclick="this.select();"/></div>
        <div class="col-md-2"><input type="text" class="form-control" id="job-week" value="*" onclick="this.select();"/></div>
        <div class="col-md-2"><a class="btn btn-primary" onclick="set_schedule();">Set</a></div>
    </div>
  </div>

For example, it should be written something like in the format below.

$('<div/>').append(

        ).append(

        ) ....

What is the best possible way to create HTMLs like above using jQuery append? Lead here is really appreciated.



from HTML String via jQuery append

No comments:

Post a Comment