创建abbr标签title的显示列表

Question

如图，请问哪一个实现方法更好？
方法1是书本上的，但是感觉它是不是复杂化了呢？或者说有没有更好的方法？求指点。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在JavaScript中，我们可以使用getElementsByTagName()函数来获取所有符合条件的元素。然后，我们可以遍历这些元素并为每个元素创建一个<dt>和<dd>元素，并将它们添加到<dl>元素中。

以下是两种不同的实现方法：

方法1: 使用 getElementsByTagName() 和 appendChild()

function displayAbbreviation() {
    var abbreviations = document.getElementsByTagName('abbr');
    var list = document.createElement('dl');

    for (var i = 0; i < abbreviations.length; i++) {
        var key = abbreviations[i].lastChild.nodeValue;
        var value = abbreviations[i].getAttribute('title');
        
        var listHead = document.createElement('dt');
        listHead.appendChild(document.createTextNode(key));
        
        var listContent = document.createElement('dd');
        listContent.appendChild(document.createTextNode(value));

        list.appendChild(listHead);
        list.appendChild(listContent);
    }

    var para = document.getElementsByTagName('p')[0];
    insertAfter(list, para);

    addLoadEvent(displayAbbreviation);
}

function insertAfter(elementToInsert, referenceElement) {
    var parent = referenceElement.parentNode;
    if (!parent) return;

    var nextNode = referenceElement.nextSibling;
    if (!nextNode) {
        parent.appendChild(elementToInsert);
    } else {
        elementToInsert.parentNode.insertBefore(elementToInsert, nextNode);
    }
}

方法2: 使用 getElementsByTagName()、createTextNode() 和 appendChild()

function displayAbbreviation() {
    var abbreviations = document.getElementsByTagName('abbr');
    var list = document.createElement('dl');

    for (var i = 0; i < abbreviations.length; i++) {
        var key = abbreviations[i].lastChild.nodeValue;
        var value = abbreviations[i].getAttribute('title');
        
        var listHead = document.createElement('dt');
        listHead.appendChild(createTextNode(key));

        var listContent = document.createElement('dd');
        listContent.appendChild(createTextNode(value));

        list.appendChild(listHead);
        list.appendChild(listContent);
    }

    var para = document.getElementsByTagName('p')[0];
    insertAfter(list, para);

    addLoadEvent(displayAbbreviation);
}

function createTextNode(text) {
    var node = document.createTextNode(text);
    return node;
}

这两种方法都可以正确地将abbr标签中的值显示出来。你可以根据自己的需求选择合适的方法。