Why "message here" text seems like bold

user_2844703 0
Viewed 64

I'm using jQuery to append <div>, and it's appending an extra close icon but I can't see why. If you run the code snippet below and click on "Add more" link, you'll see an additional times (x) icon, and the "message here" text seems bolded.

$(function() {


  $("#add").click(function() {
    $('<div class="row domainName"><div class="col"><div class="input-group mb-2"><span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span><input type="text" class="form-control" placeholder="Domain"><span class="remove input-group-text bg-white"><a href="javascript:void(0);"><i class="fas fa-times"></li></a></span></div></div><div class="col"> message here </div></div>').appendTo("#DomainsList");
  });

  $("#DomainsList").on("click", ".remove", function() {
    $(this).closest('.domainName').remove();
  });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<section id="DomainsList">
  <div class="row">
    <div class="col">
      <div class="input-group mb-2">
        <span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span>
        <input type="text" class="form-control" placeholder="Domains">
      </div>
    </div>
    <div class="col">message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i class="fas fa-plus-circle"></i> Add More</a>

jquery
3 Answers

This problem is caused by typing error.

<i> tag should close with </i>.

In your code, <i> close with </li>.

Using template characters(`) instead of single quotes(') will help with readability when adding code as a string.

$(function () {
  $("#add").click(function () {
    $(`
      <div class="row domainName">
        <div class="col">
          <div class="input-group mb-2">
            <span class="input-group-text bg-white">
              <i class="fas fa-lock text-secondary"></i>
            </span>
            <input type="text" class="form-control" placeholder="Domain"/>
              <span class="remove input-group-text bg-white">
                <a href="javascript:void(0);">
                  <i class="fas fa-times"></i>
                </a>
              </span>
          </div>
        </div>
        <div class="col"> message here </div>
      </div>
    `).appendTo("#DomainsList");
  });

  $("#DomainsList").on("click", ".remove", function () {
    $(this).closest(".domainName").remove();
  });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<section id="DomainsList">
  <div class="row">
    <div class="col">
      <div class="input-group mb-2">
        <span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span>
        <input type="text" class="form-control" placeholder="Domains">
      </div>
    </div>
    <div class="col">message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i class="fas fa-plus-circle"></i> Add More</a>

user_128439420

//do not use fas fa-times class from i tag and add into span tag html ,and add css .remove { cursor: pointer;} for display hand cursor while mouse over on it, see bellow code $("#add").click(function() { $(' message here ').appendTo("#DomainsList"); });

user_181195190

Little problem is interrupt your output. Your starting tag is <i> and closing tag is <li> while you append message block inside #DomainsList that is the problem.

Look here for how to create and append multiple elements in jQuery, it's make your code easy to read

jQuery create and append multiple elements

Change:

<i class="fas fa-times"></li>

To:

<i class="fas fa-times"></i>

Here down is modified code:

$(function() {
  $("#add").click(function() {
    var appendBlock = '<div class="row domainName">' +
                            '<div class="col">' +
                                '<div class="input-group mb-2">' +
                                    '<span class="input-group-text bg-white">' +
                                        '<i class="fas fa-lock text-secondary"></i>' +
                                    '</span>' +
                                    '<input type="text" class="form-control" placeholder="Domain">' +
                                    '<span class="remove input-group-text bg-white">' +
                                        '<a href="javascript:void(0);">' +
                                            '<i class="fas fa-times"></i>' +
                                        '</a>' +
                                    '</span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="col"> message here </div>' +
                        '</div>';
                        
    $("#DomainsList").append(appendBlock); 
  });

  $("#DomainsList").on("click", ".remove", function() {
    $(this).closest('.domainName').remove();
  });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section id="DomainsList">
  <div class="row">
    <div class="col">
      <div class="input-group mb-2">
        <span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span>
        <input type="text" class="form-control" placeholder="Domains">
      </div>
    </div>
    <div class="col">message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i class="fas fa-plus-circle"></i> Add More</a>

user_134666890
Related