Использование createTextNode(), но мне нужно добавить HTML-теги к нему (JavaScript/JQuery)

Question

Когда я щелкаю элемент в таблице, он мне нужен, чтобы добавить этот элемент в список и отобразить этот список.

Вот мой код для добавления / отображения элементов в списке:

    var myList = document.getElementById('my-list');

    function addItemToList(id) {

        var entry = document.createElement('li');

        entry.appendChild(document.createTextNode(id));
        myList.appendChild(entry);

    };

Это прекрасно работает, но мне также нужно добавить кнопку "удалить" для каждого элемента в списке.

Но когда я добавляю + ' <a href="#">delete</a>' к createTextNode() параметр, это не работает. Это потому, что, очевидно, textNodes может иметь только простой текст.

Так как мне заставить этот код работать с тегом HTML? Есть ли другой метод JS или Jquery, кроме createTextNode() что будет делать то же самое, но разрешить теги HTML?

Answer 1

Я не уверен, есть ли какие-то конкретные причины, по которым вы используете createTextNode() или избегать селекторов jQuery, но если это просто потому, что вы новичок в jQuery в целом, то этот фрагмент кода содержит некоторые обновления с лучшими методиками и решает вашу проблему. Надеюсь, поможет!

var $myList = $('#my-list');

function addItemToList(id) {
  var $deleteLink = $('<a href="#">Delete</a>');
  $deleteLink.on('click', function(e) {
    e.preventDefault();
    $(this).parent().remove()
  })
  
  var $entry = $('<li>'+id+'</li>')
  $entry.append($deleteLink)

  $myList.append($entry);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="my-list">
  
</ul>

<a href="#" onClick="addItemToList(1)">Add Item</a>

Answer 2

С конкретным сценарием, который вы упоминаете, вы просто установите innerHTML из li

entry.innerHTML = id + ' <a href="#">delete</a>'

В противном случае, либо создайте элемент, как вы сделали для li, но используя a вместо этого, и добавьте его. Или просто использовать insertAdjacentHTML() добавить все это

Создание элемента

var entry = document.creatElement('li');
entry.appendChild(document.createTextNode(id));

var link = document.createElement('a');
link.href = "#";
link.innerText = "delete";
entry.appendChild(link);

Использование insertAdjacentHTML

entry.insertAdjacentHTML('beforeend',id + ' <a href="#">delete</a>');

демонстрация

var id = "Some Text";
var list = document.querySelector("ul");
var entry = document.createElement("li");
entry.insertAdjacentHTML("beforeend", `${id} <a href="#">delete</a>`);

list.appendChild(entry);

<ul></ul>

Кроме того, поскольку вы пометили JQuery, вы можете сделать то же самое, что и insertAdjacentHTML но, позвонив в JQuery's append() метод

$(entry).append( id + ' <a href="#">delete</a>' );

Answer 3

Одна возможность будет:

function addItemToList(id) {

    var entry = document.createElement('li');

    entry.innerHTML = id + '<a href="#">delete</a>';
    myList.appendChild(entry);

};