title: How can i edit the Li item to add text to it with javascript
body: <p>I am creating a trello like web app for practising so i have completed the cards with drag drop features but i want now to add content to the li items of an ul tag that can even be edited by user too</p>
  
  <p>I  want it to be in javascript</p>
  
  <p>HTML COde</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Trello&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="/css/style.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- Masthead --&gt;
      &lt;header class="masthead"&gt;
          &lt;div class="boards-menu"&gt;
              &lt;div class="board-search"&gt;
                  &lt;input type="search" class="board-search-input" aria-label="Board Search"&gt;
                  &lt;i class="fas fa-search search-icon" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="logo"&gt;
              &lt;h1&gt;&lt;i class="fab fa-trello logo-icon" aria-hidden="true"&gt;&lt;/i&gt;Trello&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="user-settings" style="height: 20px;margin-bottom:35px;"&gt;
              &lt;a href="profile.html"&gt;
                  &lt;img src="https://img.icons8.com/wired/64/000000/settings.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;!-- Lists container --&gt;
      &lt;section class="lists-container"&gt;
          &lt;div class="list" id="dragabble_card"&gt;
              &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="list" id="dragabble_card1"&gt;
              &lt;h3 class="list-title"&gt;Completed Tasks&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="list" id="dragabble_card"&gt;
              &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;button class="add-list-btn btn"&gt;Add a list&lt;/button&gt;
      &lt;/section&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="script/script.js"&gt;
  
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(function () {
      $("#parent, #parent1").sortable({
          connectWith: ".list-items"
      }).disableSelection();
  });
  
  
  document.getElementById('button').onclick = repeat;
  
  var i = 0;
  var original = document.getElementById('repeatTHIS');
  
  
  function repeat() {
      var clone = original.cloneNode(true);
      clone.id = "repeatTHIS" + ++i;
      original.parentNode.appendChild(clone);
  }
  </code></pre>
  
  <p>my css as  follows</p>
  
  <pre><code>body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
  }
  
  .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      font: inherit;
      background: none;
      border: none;
      color: inherit;
      padding: 0;
      cursor: pointer;
  }
  
  :focus {
      outline-color: #fa0;
  }
  
  :root {
      font-size: 11px;
  }
  
  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }
  
  /* Masthead */
  
  .masthead {
      flex-basis: 4rem;
      display: flex;
      align-items: center;
      padding: 0 0.8rem;
      margin: -8px -8px 0 -8px;
      background-color: #0067a3;
      box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
  }
  
  .masthead .btn {
      background-color: #4c94be;
      border-radius: 0.3rem;
      transition: background-color 150ms;
  }
  
  .masthead .btn:hover {
      background-color: #3385b5;
  }
  
  .boards-menu {
      display: flex;
      flex-shrink: 0;
  }
  
  .boards-btn {
      flex-basis: 9rem;
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      margin-right: 0.8rem;
      padding: 0.6rem 0.8rem;
  }
  
  .boards-btn-icon {
      font-size: 1.7rem;
      padding-right: 1.2rem;
  }
  
  .board-search {
      flex-basis: 18rem;
      position: relative;
  }
  
  .board-search-input {
      height: 3rem;
      border: none;
      border-radius: 0.3rem;
      background-color: #4c94be;
      width: 100%;
      padding: 0 3rem 0 1rem;
      color: #fff;
  }
  
  .board-search-input:hover {
      background-color: #66a4c8;
  }
  
  .search-icon {
      font-size: 1.5rem;
      position: absolute;
      top: 50%;
      right: 0.8rem;
      transform: translateY(-50%) rotate(90deg);
      color: #fff;
  }
  
  .logo {
      flex: 1;
      font-family: "Courgette", cursive;
      font-size: 2.2rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.5);
      margin: 0 2rem;
      transition: color 150ms;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
  }
  
  .logo:hover {
      color: rgba(255, 255, 255, 0.8);
  }
  
  .logo-icon {
      padding-right: 0.4rem;
  }
  
  .user-settings {
      display: flex;
      height: 1.5rem;
      color: #fff;
  }
  
  
  .user-settings-btn {
      font-size: 1.5rem;
      width: 3.5rem;
      margin-right: 1.5rem;
  }
  
  
  /* Board info bar */
  
  .board-info-bar {
      flex-basis: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0.8rem 0;
      padding: 0 1rem;
      color: #f6f6f6;
  }
  
  sboard-info-bar .btn {
      font-size: 1.4rem;
      font-weight: 400;
      transition: background-color 150ms;
      padding: 0 0.6rem;
      border-radius: 0.3rem;
      height: 3rem;
  }
  
  .board-info-bar .btn:hover {
      background-color: #006aa8;
  }
  
  .private-btn-icon,
  .menu-btn-icon {
      padding-right: 0.6rem;
      white-space: nowrap;
  }
  
  .board-title h2 {
      font-size: 1.8rem;
      font-weight: 700;
      white-space: nowrap;
  }
  
  /* Lists */
  
  .lists-container::-webkit-scrollbar {
      height: 2.4rem;
  }
  
  .lists-container::-webkit-scrollbar-thumb {
      background-color: #66a3c7;
      border: 0.8rem solid #0079bf;
      border-top-width: 0;
  }
  
  .lists-container {
      display: flex;
      align-items: start;
      padding: 0 0.8rem 0.8rem;
      overflow-x: auto;
      height: calc(100vh - 8.6rem);
      margin-top: 60px;
  }
  
  .list {
      flex: 0 0 27rem;
      display: flex;
      flex-direction: column;
      background-color: #e2e4e6;
      max-height: calc(100vh - 11.8rem);
      border-radius: 0.3rem;
      margin-right: 1rem;
  }
  
  .list:last-of-type {
      margin-right: 0;
  }
  
  .list-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: #333;
      padding: 1rem;
  }
  
  .list-items {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-content: start;
      padding: 0 0.6rem 0.5rem;
      overflow-y: auto;
  }
  
  .list-items::-webkit-scrollbar {
      width: 1.6rem;
  }
  
  .list-items::-webkit-scrollbar-thumb {
      background-color: #c4c9cc;
      border-right: 0.6rem solid #e2e4e6;
  }
  
  .list-items li {
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.3;
      background-color: #fff;
      padding: 0.65rem 0.6rem;
      color: #4d4d4d;
      border-bottom: 0.1rem solid #ccc;
      border-radius: 0.3rem;
      margin-bottom: 0.6rem;
      word-wrap: break-word;
      cursor: pointer;
  }
  
  .list-items li:last-of-type {
      margin-bottom: 0;
  }
  
  .list-items li:hover {
      background-color: #eee;
  }
  
  .add-card-btn {
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      color: #838c91;
      padding: 1rem;
      text-align: left;
      cursor: pointer;
  }
  
  .add-card-btn:hover {
      background-color: #cdd2d4;
      color: #4d4d4d;
      text-decoration: underline;
  }
  
  
  .add-list-btn {
      flex: 0 0 27rem;
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      background-color: #006aa7;
      color: #a5cae0;
      padding: 1rem;
      border-radius: 0.3rem;
      cursor: pointer;
      transition: background-color 150ms;
      text-align: left;
      margin-left: 15px;
  }
  
  .add-list-btn:hover {
      background-color: #005485;
  }
  
  .add-card-btn::after,
  .add-list-btn::after {
      content: '...';
  }
  
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(function () {
          $("#parent, #parent1").sortable({
              connectWith: ".list-items"
          }).disableSelection();
      });
  
  
      document.getElementById('button').onclick = repeat;
  
      var i = 0;
      var original = document.getElementById('repeatTHIS');
  
  
      function repeat() {
          var clone = original.cloneNode(true);
          clone.id = "repeatTHIS" + ++i;
          original.parentNode.appendChild(clone);
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
          font-family: Arial, sans-serif;
          display: flex;
          flex-direction: column;
      }
  
      .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          font: inherit;
          background: none;
          border: none;
          color: inherit;
          padding: 0;
          cursor: pointer;
      }
  
      :focus {
          outline-color: #fa0;
      }
  
      :root {
          font-size: 11px;
      }
  
      *,
      *::before,
      *::after {
          box-sizing: border-box;
      }
  
      /* Masthead */
  
      .masthead {
          flex-basis: 4rem;
          display: flex;
          align-items: center;
          padding: 0 0.8rem;
          margin: -8px -8px 0 -8px;
          background-color: #0067a3;
          box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
      }
  
      .masthead .btn {
          background-color: #4c94be;
          border-radius: 0.3rem;
          transition: background-color 150ms;
      }
  
      .masthead .btn:hover {
          background-color: #3385b5;
      }
  
      .boards-menu {
          display: flex;
          flex-shrink: 0;
      }
  
      .boards-btn {
          flex-basis: 9rem;
          font-size: 1.4rem;
          font-weight: 700;
          color: #fff;
          margin-right: 0.8rem;
          padding: 0.6rem 0.8rem;
      }
  
      .boards-btn-icon {
          font-size: 1.7rem;
          padding-right: 1.2rem;
      }
  
      .board-search {
          flex-basis: 18rem;
          position: relative;
      }
  
      .board-search-input {
          height: 3rem;
          border: none;
          border-radius: 0.3rem;
          background-color: #4c94be;
          width: 100%;
          padding: 0 3rem 0 1rem;
          color: #fff;
      }
  
      .board-search-input:hover {
          background-color: #66a4c8;
      }
  
      .search-icon {
          font-size: 1.5rem;
          position: absolute;
          top: 50%;
          right: 0.8rem;
          transform: translateY(-50%) rotate(90deg);
          color: #fff;
      }
  
      .logo {
          flex: 1;
          font-family: "Courgette", cursive;
          font-size: 2.2rem;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.5);
          margin: 0 2rem;
          transition: color 150ms;
          text-align: center;
          white-space: nowrap;
          cursor: pointer;
      }
  
      .logo:hover {
          color: rgba(255, 255, 255, 0.8);
      }
  
      .logo-icon {
          padding-right: 0.4rem;
      }
  
      .user-settings {
          display: flex;
          height: 1.5rem;
          color: #fff;
      }
  
  
      .user-settings-btn {&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Trello&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="/css/style.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- Masthead --&gt;
      &lt;header class="masthead"&gt;
          &lt;div class="boards-menu"&gt;
              &lt;div class="board-search"&gt;
                  &lt;input type="search" class="board-search-input" aria-label="Board Search"&gt;
                  &lt;i class="fas fa-search search-icon" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="logo"&gt;
              &lt;h1&gt;&lt;i class="fab fa-trello logo-icon" aria-hidden="true"&gt;&lt;/i&gt;Trello&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="user-settings" style="height: 20px;margin-bottom:35px;"&gt;
              &lt;a href="profile.html"&gt;
                  &lt;img src="https://img.icons8.com/wired/64/000000/settings.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;!-- Lists container --&gt;
      &lt;section class="lists-container"&gt;
          &lt;div class="list" id="dragabble_card"&gt;
              &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="list" id="dragabble_card1"&gt;
              &lt;h3 class="list-title"&gt;Completed Tasks&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="list" id="dragabble_card"&gt;
              &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
              &lt;ul class="list-items" id="parent"&gt;
                  &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
          &lt;/div&gt;
          &lt;button class="add-list-btn btn"&gt;Add a list&lt;/button&gt;
      &lt;/section&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="script/script.js"&gt;
  
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
          font-size: 1.5rem;
          width: 3.5rem;
          margin-right: 1.5rem;
      }
  
  
      /* Board info bar */
  
      .board-info-bar {
          flex-basis: 3rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0.8rem 0;
          padding: 0 1rem;
          color: #f6f6f6;
      }
  
      sboard-info-bar .btn {
          font-size: 1.4rem;
          font-weight: 400;
          transition: background-color 150ms;
          padding: 0 0.6rem;
          border-radius: 0.3rem;
          height: 3rem;
      }
  
      .board-info-bar .btn:hover {
          background-color: #006aa8;
      }
  
      .private-btn-icon,
      .menu-btn-icon {
          padding-right: 0.6rem;
          white-space: nowrap;
      }
  
      .board-title h2 {
          font-size: 1.8rem;
          font-weight: 700;
          white-space: nowrap;
      }
  
      /* Lists */
  
      .lists-container::-webkit-scrollbar {
          height: 2.4rem;
      }
  
      .lists-container::-webkit-scrollbar-thumb {
          background-color: #66a3c7;
          border: 0.8rem solid #0079bf;
          border-top-width: 0;
      }
  
      .lists-container {
          display: flex;
          align-items: start;
          padding: 0 0.8rem 0.8rem;
          overflow-x: auto;
          height: calc(100vh - 8.6rem);
          margin-top: 60px;
      }
  
      .list {
          flex: 0 0 27rem;
          display: flex;
          flex-direction: column;
          background-color: #e2e4e6;
          max-height: calc(100vh - 11.8rem);
          border-radius: 0.3rem;
          margin-right: 1rem;
      }
  
      .list:last-of-type {
          margin-right: 0;
      }
  
      .list-title {
          font-size: 1.4rem;
          font-weight: 700;
          color: #333;
          padding: 1rem;
      }
  
      .list-items {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-content: start;
          padding: 0 0.6rem 0.5rem;
          overflow-y: auto;
      }
  
      .list-items::-webkit-scrollbar {
          width: 1.6rem;
      }
  
      .list-items::-webkit-scrollbar-thumb {
          background-color: #c4c9cc;
          border-right: 0.6rem solid #e2e4e6;
      }
  
      .list-items li {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.3;
          background-color: #fff;
          padding: 0.65rem 0.6rem;
          color: #4d4d4d;
          border-bottom: 0.1rem solid #ccc;
          border-radius: 0.3rem;
          margin-bottom: 0.6rem;
          word-wrap: break-word;
          cursor: pointer;
      }
  
      .list-items li:last-of-type {
          margin-bottom: 0;
      }
  
      .list-items li:hover {
          background-color: #eee;
      }
  
      .add-card-btn {
          display: block;
          font-size: 1.4rem;
          font-weight: 400;
          color: #838c91;
          padding: 1rem;
          text-align: left;
          cursor: pointer;
      }
  
      .add-card-btn:hover {
          background-color: #cdd2d4;
          color: #4d4d4d;
          text-decoration: underline;
      }
  
  
      .add-list-btn {
          flex: 0 0 27rem;
          display: block;
          font-size: 1.4rem;
          font-weight: 400;
          background-color: #006aa7;
          color: #a5cae0;
          padding: 1rem;
          border-radius: 0.3rem;
          cursor: pointer;
          transition: background-color 150ms;
          text-align: left;
          margin-left: 15px;
      }
  
      .add-list-btn:hover {
          background-color: #005485;
      }
  
      .add-card-btn::after,
      .add-list-btn::after {
          content: '...';
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;title&gt;Trello&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link href="/css/style.css" rel="stylesheet"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;!-- Masthead --&gt;
          &lt;header class="masthead"&gt;
              &lt;div class="boards-menu"&gt;
                  &lt;div class="board-search"&gt;
                      &lt;input type="search" class="board-search-input" aria-label="Board Search"&gt;
                      &lt;i class="fas fa-search search-icon" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="logo"&gt;
                  &lt;h1&gt;&lt;i class="fab fa-trello logo-icon" aria-hidden="true"&gt;&lt;/i&gt;Trello&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="user-settings" style="height: 20px;margin-bottom:35px;"&gt;
                  &lt;a href="profile.html"&gt;
                      &lt;img src="https://img.icons8.com/wired/64/000000/settings.png"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;!-- Lists container --&gt;
          &lt;section class="lists-container"&gt;
              &lt;div class="list" id="dragabble_card"&gt;
                  &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
                  &lt;ul class="list-items" id="parent"&gt;
                      &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="list" id="dragabble_card1"&gt;
                  &lt;h3 class="list-title"&gt;Completed Tasks&lt;/h3&gt;
                  &lt;ul class="list-items" id="parent"&gt;
                      &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="list" id="dragabble_card"&gt;
                  &lt;h3 class="list-title"&gt;Tasks to Do&lt;/h3&gt;
                  &lt;ul class="list-items" id="parent"&gt;
                      &lt;li id="repeatTHIS"&gt; &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;button class="add-card-btn btn" id="button" onclick="repeat()"&gt;Add a card&lt;/button&gt;
              &lt;/div&gt;
              &lt;button class="add-list-btn btn"&gt;Add a list&lt;/button&gt;
          &lt;/section&gt;
          &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script src="script/script.js"&gt;
  
          &lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>