Как заменить span на input по двойному клику в JQuery?

Question

[FetterDetka]

Хочу сделать возможность редактировать элементы to do. Создаю DOM элемент следующим образом:

$("#to-do-list").append(
                    `<li class=list-decorate id=${tempHolderId}>
                        <input type=checkbox  ${checked} class=task-check >
                        <span  class=task-txt word-break=break-all id=spanId>${tempHolderText} </span>
                        <input type=button class=task-delete-button value=Delete >
                        <input type=button  class=task-edit-button value=Edit ><br/>
                    </li>`
                );

Дальше хочу по двойному клику превратить span в input, отредактировать текст, и по нажатию Enter сохранить его в массив(taskListHolder).

Потом отрисовать элемент обратно, при помощи функции выше. Интересует реализация с заменой span на input.

Про contenteditable=true для span знаю.

Пока сделал:

$(document).on("dblclick","#spanId", function(){
     
});
/code>

Comments

[Ragtime Kitty]

Вам нужно именно по той схеме, что указали: с заменой span на input и сохранением в массив?
Другие варианты редактировать span по двойному клику рассматриваете?

[Антон Антон]

Не мучайтесь, возьмите vue

[FetterDetka]

Minou, Антон Антон, проект учебный. с ТЗ :)
у меня и со спаном все круто работало

Answer 1

[v3shin]

Ну, типа такого:

if (!this.querySelector('input')) {
    this.innerHTML = `<input type="text" value="${this.innerText}">`;
}

И можно еще добавить свистоперделок, например, сохранять куда-нибудь предыдущее значение span для возможности отмены редактирования.
P.S.: кавычки при генерации html ставить стоит.
P.P.S.: и id span'ов лучше генерить уникальные.

Comments

[FetterDetka]

$("#spanId").replaceWith(`<input id=temp-txt-editor type=text> </input>`)
            $("#body-id").keydown(function (event) {
                if (event.keyCode == 13) {
                    
                } 
            });

сделал так спасибо за подсказку!