5

テーブル内のアイテムをクリックすると、そのアイテムがリストに追加され、そのリストが表示される必要があります。

リストにアイテムを追加/表示するための私のコードは次のとおりです。

    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 タグで機能させるにはどうすればよいでしょうか。createTextNode()同じことを行うが、HTMLタグを許可する以外のJSまたはJqueryメソッドはありますか?

4

3 に答える 3

7

あなたが言及した特定のシナリオ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にタグを付けたので、jQueryのメソッドinsertAdjacentHTMLを呼び出すことで同じことができますappend()

$(entry).append( id + ' <a href="#">delete</a>' );
于 2016-12-16T19:56:19.677 に答える
5

1つの可能性は次のとおりです。

function addItemToList(id) {

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

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

};
于 2016-12-16T19:54:17.197 に答える
2

jQueryセレクターを使用または回避している特定の理由があるかどうかはわかりませんがcreateTextNode()、単に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>

于 2016-12-16T19:56:26.073 に答える