下面是一个示例代码，用于按键值对对象数组进行排序，并在HTML元素上显示它们：

HTML部分：

    
    


    
Sort and Display Key-Value Pairs
    

    

JavaScript部分（script.js）：

// 定义键值对对象数组
var keyValuePairs = [
    { key: 'c', value: 3 },
    { key: 'a', value: 1 },
    { key: 'b', value: 2 }
];

// 按键值对对象的键进行排序
keyValuePairs.sort(function(a, b) {
    if (a.key < b.key) {
        return -1;
    } else if (a.key > b.key) {
        return 1;
    } else {
        return 0;
    }
});

// 在HTML元素上显示排序后的键值对
var resultDiv = document.getElementById('result');
keyValuePairs.forEach(function(pair) {
    var pairDiv = document.createElement('div');
    pairDiv.innerHTML = pair.key + ': ' + pair.value;
    resultDiv.appendChild(pairDiv);
});

这段代码首先定义了一个键值对对象数组keyValuePairs，然后使用sort方法对这个数组进行排序，排序的依据是每个对象的key属性。然后，使用forEach方法循环遍历排序后的数组，并创建一个新的div元素来显示每个键值对，最后将这个div元素添加到HTML元素中的result容器中。