Как создать ссылку с атрибутами

21 апреля 2021, 17:10

при нажатии кнопки необходимо создать ссылку c вводными параметрами. Например:

<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>

Пробую:

    document.getElementById("addChannel").addEventListener("click", function (event) {
    var channel = document.getElementById("channelInput").value;
    var a = document.createElement("a");
    a.textContent = channel;

    document.getElementById("channel").appendChild(a);
    event.preventDefault();
    document.getElementById("channelInput").value = "";
});

Ссылка не добавляется. Как добавить ссылку на страницу при нажатии кнопки? При этом созданная кнопка должна размещаться выше кнопки добавления

Разметка кнопок:

<div class="list-group" id="channel" role="tablist">
                <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
                <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
                <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
                <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
                <a class="list-group-item list-group-item-action" id="modal" data-toggle="modal" href="#myModalBox" role="tab" aria-controls="add">+</a>
</div>

Answer 1

document.getElementById("addChannel").addEventListener("click", function (event) {
    var channel = document.getElementById("channelInput").value;
    var a = document.createElement('a');
    var linkText = document.createTextNode(channel);
    a.appendChild(linkText);
    a.className = "list-group-item list-group-item-action";
    a.id = "list-" + channel + "-list";
    a.href = "#list-" + channel;
    document.getElementById("channel").appendChild(a);
    document.getElementById("channelInput").value = "";
});