Question

我正在尝试检索我通过JavaScript创建的li元素的元素的文本。这是我用来创建的代码：

function myFunction(search) {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('delegateNameInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("nameList");
    li = ul.getElementsByTagName('li');

    data = ['test1', 'test2', 'test3'];

    for (i = 0; i < data.length; i++) {
        var lineItem = document.createElement("li");
        lineItem.setAttribute('onClick', 'setName(this)');
        var link = document.createElement("a");
        link.appendChild(document.createTextNode("test2"));
        lineItem.appendChild(link);
        ul.appendChild(lineItem);
    }
}

如何从a元素获取文本？

Answer 1

anchor元素的编写方式是创建的LI元素的第一个子元素，并由LI元素的pip install opencv-contrib-python属性指向。

或者，您可以在DOM的LI节点的firstChild属性中找到A元素作为第一个条目。

在本演示中，我将列表项中的文本设置为不同的数据数组条目，声明为children，并忽略了未使用的变量data和input, filter：

li

"use strict";
function myFunction(search) {
    // Declare variables
    var input, filter, ul, li, a, i, data;
    input = document.getElementById('delegateNameInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("nameList");
    li = ul.getElementsByTagName('li');

    data = ['test1', 'test2', 'test3'];

    for (i = 0; i < data.length; i++) {
        var lineItem = document.createElement("li");
        lineItem.setAttribute('onClick', 'setName(this)');
        var link = document.createElement("a");
        link.appendChild(document.createTextNode(data[i]));
        lineItem.appendChild(link);
        ul.appendChild(lineItem);
    }
}

function setName( lineItem) {
    console.log("setName>lineItem>Anchor>link text = '" + lineItem.firstChild.textContent + "'");
    console.log("(using children: '" + lineItem.children[0].textContent + "')");
}

myFunction(null);

参考文献：

<input type="text" id="delegateNameInput" placeholder="delegateNameInput"> <ul id="nameList"> </ul> (Click a list item to see console message)继承自node interface
firstChild是从ParentNode mixin继承的，并且是实时HTMLCollection。

从li的子节点中检索文本

1 个答案: