How to append text/html aside other jquery tags in JQuery-CodePudding

I am trying to design a calendar component and the html for the section is:

<th id="thNow">July<span ><img src="/UpDownArrow.png" /></span>, 2022<span ><img src="/UpDownArrow.png" /></span></th>

In JQuery (3 if it matters), the code I'm attempting with it is:

var thNow = $("<th></th>", {    id: "thNow" })
                .html(sMonth)
                .append(
                    $("<span></span>",  {   "class":    "scrollArrow"   })
                        .append(
                            $("<img />",    {   "src":  "/UpDownArrow.png"  })))
                                .html(", ")
                                .html(sYear)
                                .append(
                                    $("<span></span>",  {   "class":    "scrollArrow"   })
                                .append(
                                    $("<img />",    {   "src":  "/UpDownArrow.png"  })));

even though I know that won't work - How do I effectively piece together the string of the Month name like with .html(), an img tag, the text ", " and the year, and another image tag - This Jquery code just replaces the Month name with the year and the image tag.

Do I need to wrap each of the text in a span/div or something? Eventually (after I add the code that is), the month name and year will be links to select a month out of all the months and a year out of all the years like one might see in a date picker but this is more than just a date picker.

It's for my own personal calendar to merge my work and home calendars to make a sort of calendly site for myself but which will use google apis to query my google calendar and Office APIs to query my work calendar and people (or I) can add events to it as well.

Is there a way to do what I want or do I need to definitely wrap each of the text things in a tag of some sort?

CodePudding user response：

The problem with your code is because you're calling html() to add the , and the year strings. This is overwriting all the previous HTML you appended to the element. Use append() instead.

In addition, the HTML you clone includes an id, as noted by @zer00ne in the comments below. This will mean that your HTML becomes invalid as id attributes must be unique within the DOM. Change this to a class instead.

let sMonth = 'July';
let sYear = '2022';

var thNow = $("<th />", {
    class: "thNow"
  }).html(sMonth)
  .append(
    $("<span />", { class: "scrollArrow" }).append(
      $("<img />", { src: "/UpDownArrow.png" })
    )
  )
  .append(" , "   sYear)
  .append(
    $("<span />", { class: "scrollArrow" }).append(
      $("<img />", { src: "/UpDownArrow.png" })
    )
  );

thNow.appendTo('table tr');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <th >
      July
      <span ><img src="/UpDownArrow.png" /></span> , 2022
      <span ><img src="/UpDownArrow.png" /></span>
    </th>
  </tr>
</table>

However it's worth noting that building HTML through JS/jQuery is not an ideal solution. It leads to very verbose code that takes some conscious effort to understand and is difficult to maintain.

The far better approach would be to store the HTML as a template within the HTML page. Then you can just use jQuery to clone that template and update any labels within it.

This pattern has the benefit of separating the HTML and JS concerns (ie. the developer who knows HTML can easily update the template without needing to understand how the JS works), and also allowing for much simpler JS code. Try this:

let addHeader = ($target, month, year) => {
  let html = $('#th-template').html()
    .replace('{{month}}', month)
    .replace('{{year}}', year)
  $target.append(html);
}

$('#add-header').on('click', () => addHeader($('table tr'), 'July', '2022'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add-header">Add header</button>

<template id="th-template">
  <th >
    {{month}}
    <span ><img src="/UpDownArrow.png" /></span> , {{year}}
    <span ><img src="/UpDownArrow.png" /></span>
  </th>
</template>

<table>
  <tr>
    <th >
      July
      <span ><img src="/UpDownArrow.png" /></span> , 2022
      <span ><img src="/UpDownArrow.png" /></span>
    </th>
  </tr>
</table>