Question

我正在尝试将a链接附加到列表项，但我正在努力弄清楚如何获取与textnode的a链接。

所以基本上我想要的东西是

<li><a href="http://en.wikipedia.org/wiki/Bumble">Bumble</a></li>

我已经设法正确地输出了li，我只是不明白我是如何将a元素作为输出的一部分。

这是所有代码

//Process the JSON data
    function processResponse (){
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var response = JSON.parse(httpRequest.responseText);
                console.log(response[1])
                //Grab suggestions div from DOM
                var suggestions = document.getElementById('suggestions');
                //Create new element UL
                var list = document.createElement('UL');
                //Create new elements for li's
                var newLi, newText ;
                //For all the text nodes
                var textNodes = [];
                //For all the li's
                var liList = [];
                //For all the links
                var links = [];
                //For loop to add and append all suggestions 
                for (var i = 0; i < response[1].length; i++) {

                    links[i] = document.createElement('a');
                    var setHTML = response[1][i].replace(/\s/g, '_');
                    var link = 'http://en.wikipedia.org/wiki/'+setHTML;

                    links[i].href = link;
                    //Create new text node with the response from api
                    textNodes[i] = document.createTextNode(response[1][i]);
                    //Create a new element 'li' into array
                    liList[i] = document.createElement('li')
                    //Append the response(textnode) to the li in the array
                    liList[i].appendChild(textNodes[i]); 
                    //Append the li to the UL 
                    list.appendChild(liList[i]);
                }
                console.log(links);
                //Append the UL to the suggestions DIV
                suggestions.appendChild(list);
            } else {
                alert('There was a problem with the request');
            }
        }

    }

Answer 1

您创建了a元素，但从未将它们放在li元素中。目前，您的代码

//Append the response(textnode) to the li in the array
liList[i].appendChild(textNodes[i]);

也许你想要

//Append the response(textnode) to the a in the array
links[i].appendChild(textNodes[i]);
//Append the a to the li in the array
liList[i].appendChild(links[i]);

Answer 2

for (var i = 0; i < response[1].length; i++) {
    links[i] = document.createElement('a');
    var setHTML = response[1][i].replace(/\s/g, '_');
    var link = 'http://en.wikipedia.org/wiki/'+setHTML;

    links[i].href = link;
    links[i].text = response[1][i];
    //Create new text node with the response from api
    //textNodes[i] = document.createTextNode(response[1][i]);
    //Create a new element 'li' into array
    liList[i] = document.createElement('li')
    //Append the response(textnode) to the li in the array
    liList[i].appendChild(links[i]); 
    //Append the li to the UL 
    list.appendChild(liList[i]);
}

Answer 3

你关闭了。将文本节点附加到链接，并将附加到li：

textNodes[i] = document.createTextNode(response[1][i]);
links[i].appendChild(textNodes[i]);

liList[i] = document.createElement('li')
liList[i].appendChild(links[i]); 

list.appendChild(liList[i]);

追加到li元素的链接

3 个答案: