How can I get special web elements in appending function with Jquery?

Question

I have a problem with this, when I have a bottom function to appending some web elements, like this:

 var index = 0;
    $("#addGift").click(function () {
        var gift = "<ul id=\"ul\">\n" +
            "        <li>\n" +
            "            <label>Gift Type1</label>\n" +
            "            <select name=\"giftType\">\n" +
            "                <option value=\"coin\">coin</option>\n" +
            "                <option value=\"album\">album</option>\n" +
            "                <option value=\"vip\">vip</option>\n" +
            "            </select>\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Num</label>\n" +
            "            <input type=\"number\" name=\"num\">\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Time</label>\n" +
            "            <input name=\"time\" class=\"easyui-datebox\" data- 
     options=\"sharedCalendar:'#cc'\">\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Unit</label>\n" +
            "            <select name=\"unit\">\n" +
            "                <option value=\"day\">day</option>\n" +
            "                <option value=\"month\">month</option>\n" +
            "            </select>\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Gift Type2</label>\n" +
            "            <select name=\"giftType\">\n" +
            "                <option value=\"coin\">coin</option>\n" +
            "                <option value=\"album\">album</option>\n" +
            "                <option value=\"vip\">vip</option>\n" +
            "            </select>\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Num</label>\n" +
            "            <input type=\"number\" name=\"num\">\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Time</label>\n" +
            "            <input name=\"time\" class=\"easyui-datebox\" data- 
    options=\"sharedCalendar:'#cc'\">\n" +
            "        </li>\n" +
            "        <li>\n" +
            "            <label>Unit</label>\n" +
            "            <select name=\"unit\">\n" +
            "                <option value=\"day\">day</option>\n" +
            "                <option value=\"month\">month</option>\n" +
            "            </select>\n" +
            "        </li>\n" +
            "    </ul>"
        $("#giftTable").append(gift);
        index++;
    });

I had try many ways to get that web elements like name='time' or name='unit' to do show or hide action, but it doesn't work. Because I didn't get that elements correctly.

So how can I get special web elements in appending function with Jquery?

Answer 1

welcome to stack overflow.

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals . They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.

A template literal is delimited by backticks :

var index = 0;
$("#addGift").click(function () {
    var gift = `<ul id="ul">
                  <li>
                    <label>Gift Type1</label>
                    <select name="giftType">
                        <option value="coin">coin</option>
                        <option value="album">album</option>
                        <option value="vip">vip</option>
                    </select>
                  </li>
                  <li>
                    <label>Num</label>
                    <input type="number" name="num">
                  </li>
                  <li>
                    <label>Time</label>
                    <input name="time" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
                  </li>
                  <li>
                    <label>Unit</label>
                    <select name="unit">
                        <option value="day">day</option>
                        <option value="month">month</option>
                    </select>
                  </li>
                  <li>
                    <label>Gift Type2</label>
                    <select name="giftType">
                        <option value="coin">coin</option>
                        <option value="album">album</option>
                        <option value="vip">vip</option>
                    </select>
                  </li>
                  <li>
                    <label>Num</label>
                    <input type="number" name="num">
                  </li>
                  <li>
                    <label>Time</label>
                    <input name="time" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
                  </li>
                  <li>
                    <label>Unit</label>
                    <select name="unit">
                        <option value="day">day</option>
                        <option value="month">month</option>
                    </select>
                   </li>
                </ul>`;

    $("#giftTable").append(gift);
    index++;
});