Adding li element with Javascript and Jquery

Question

I just start to use JQuery and I want to add li element in my HTML when I click on a button.

My Html code :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="filtres">
      <input id="filtre1" type="button" value="filtre 1" onclick="test()">
    </div>
    <div id="liste">
      <ul>
        <li>Bonjour</li>
      </ul>
    </div>
  </body>
</html>

And my js file :

function test() {
    console.log("On clique");
    $("<li>Coucou</li>").appendTo("<ul>");
}

Unfortunately, It doesn't work and I don't understand why.

Do you have any idea ?

No it doesn't change anything. The console.log() display "On clique" in the firefox console. — MissKnacki
– MissKnacki, Commented Nov 8, 2019 at 14:27

Rory McCrossan · Accepted Answer · 2019-11-08 14:30:35Z

The problem is because your selector is incorrect. appendTo('<ul>') is trying to create a new ul element in memory and append the li to that. You instead need to use appendTo('ul'), without the angle brackets.

I'd also suggest you use unobtrusive event handlers instead of the outdated onclick attributes. Here's the full example:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </head>
  <body>
    <div class="filtres">
      <input id="filtre1" type="button" value="filtre 1" />
    </div>
    <div id="liste">
      <ul>
        <li>Bonjour</li>
      </ul>
    </div>
  </body>
</html>

jQuery(function($) {
  $('#filtre1').on('click', function() {
    console.log("On clique");
    $("<li>Coucou</li>").appendTo("ul");
  });
})

Damian Peralta · Accepted Answer · 2019-11-08 14:32:46Z

1

Try this:

function test() {
  $('ul').append('<li>Hello!</li>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="liste">
      <ul>
        <li>Bonjour</li>
      </ul>
</div>
<button onclick="test()">append</button>

append() will add an element at the end

answered Nov 8, 2019 at 14:32

Damian Peralta

1,8969 silver badges12 bronze badges

Comments

Hemanth · Accepted Answer · 2019-11-08 18:37:41Z

function test() {
  $('#liste > ul').append('<li>Coucou</li>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtres">
  <input id="filtre1" type="button" value="filtre 1" onclick="test()">
</div>

<div id="liste">
  <ul>
    <li>Bonjour</li>
  </ul>
</div>

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </head>
  <body>
    <div class="filtres">
      <input id="filtre1" type="button" value="filtre 1" />
    </div>
    <div id="liste">
      <ul>
        <li>Bonjour</li>
      </ul>
    </div>
  </body>
</html>

Collectives™ on Stack Overflow

Adding li element with Javascript and Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related