Как я могу преобразовать JavaScript [object String] в HTMLElement?

Question

Я создаю сортируемый список, используя Сортируемая JS библиотека . Библиотека делает все элементы HTML внутри указанного тега id = "" перетаскиваемым и сортируемым. Например:

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

Я использую JavaScript для генерации HTML элементов и wi sh для динамического идентификатора c. Следующее работает как задумано:

// Several list items are generated and wrapped in this <div>
var wrapper = document.createElement('div');
wrapper.id = 'foo';
Sortable.create(foo, options);

Когда я пытаюсь сделать id динамически c, он выдает ошибку:

// Several list items are generated and wrapped in this <div>
// An input exists with id="userGivenListName"
var listName = document.getElementById('userGivenListName').value;
var wrapper = document.createElement('div');
wrapper.id = listName;
Sortable.create(listName, options);

Uncaught Сортируемый: el must быть HTMLElement, а не [object String]

Когда я console.log(wrapper.id); после ввода «foo» в мою форму, он возвращает точно так же, как когда я console.log(wrapper.id); в приведенном выше, рабочий код.

Я попытался добавить одинарные кавычки, но безуспешно:

wrapper.id = "'" + listName + "'";

Answer 1

В HTML сделать это:

<div id="container"></div>
<div id="container2"></div>

В Javascript сделать это:

// Default SortableJS
import Sortable from 'sortablejs';

// create list dynamically
var id=123; 
document.getElementById('container').innerHTML = `
<ul id="${id}">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
`;
Sortable.create(document.getElementById(id), {});

// create another list dynamically
id=124; 
document.getElementById('container2').innerHTML = `
<ul id="${id}">
    <li>item 2</li>
    <li>item 3</li>
</ul>
`;
Sortable.create(document.getElementById(id), {});

См. Stackblitz-Project: https://stackblitz.com/edit/js-nlyfcw?file=index.js

Answer 2

Попробуйте это

var listName = document.getElementById('userGivenListName').value;
var wrapper = document.createElement('div');
wrapper.setAttribute("id", listName);
Sortable.create(listName, options);