Javascript 创建并附加一个元素innerHTML？恐怖。。。[请不要使用jquery]

我有一个按字母顺序返回列表的脚本，如下所示

<div id="x">
    <ul>
        <li>Apple
        <li>Banana
        <li>Blackberry
        <li>Blueberry
        <li>Cherry
        <li>Cranberry
    </ul>
</div>

<div id="x">
    <span id="A">A</span>
    <ul>
        <li>Apple
    </ul>
    <span id="B">B</span>
    <ul>
        <li>Banana
        <li>Blackberry
        <li>Blueberry
    </ul>
    <span id="C">C</span>
    <ul>
        <li>Cherry
        <li>Cranberry
    </ul>     
<div>

苹果
香蕉
黑莓
蓝莓
樱桃
蔓越莓

然而，列表中有许多项目（几乎100个），我希望按照如下方式重新排列它们

<div id="x">
    <ul>
        <li>Apple
        <li>Banana
        <li>Blackberry
        <li>Blueberry
        <li>Cherry
        <li>Cranberry
    </ul>
</div>

<div id="x">
    <span id="A">A</span>
    <ul>
        <li>Apple
    </ul>
    <span id="B">B</span>
    <ul>
        <li>Banana
        <li>Blackberry
        <li>Blueberry
    </ul>
    <span id="C">C</span>
    <ul>
        <li>Cherry
        <li>Cranberry
    </ul>     
<div>

A.

苹果

B

香蕉
黑莓
蓝莓

C

樱桃
蔓越莓

顺便说一句，我不是真的在分类水果，这只是一个例子。
它必须是那种形式，因为不重要的原因，我只需要帮助创建和附加span元素和单个列表。 我尝试过使用内部/外部HTML，我发现这真的很难。我现在有这样的想法：

function getAllLists()  
{  
var page = document.getElementById("x")
var allLists = page.getElementsByTagName("li");   
var num = allLists.length;  
//Some form of a for counter loop here
for (var counter = 0; counter < num; counter++) {   
    var first=allLists[counter].outerHTML;
    var second=allLists[counter+1].outerHTML;
    var firstletter= (allLists[counter].substring(0, 1)).toUpperCase();
    var secondletter= (allLists[counter+1].substring(0, 1)).toUpperCase();
    allLists[counter].outerHTML = '<span id="'+firstletter+'">'+firstletter+'</span>'+first;
    }
}

函数getAllList（） { var page=document.getElementById（“x”） var allLists=page.getElementsByTagName（“li”）； var num=allLists.length； //这里是某种形式的for计数器循环 对于（var counter=0；counter 请避免使用JQUERY。
我怎么强调都不过分
我不仅发现它非常难以理解，因为我仍然是javascript的业余爱好者，而且发现js已经够难了，jquery的语法简直难以理解。

我确信不需要使用jquery就可以实现我的目标。

有什么想法吗？非常感谢所有的帮助/意见/想法。

---

非常感谢。

首先，请忘记使用内部/外部TML操作DOM的所有内容。它们可以方便地插入HTML块或文档部分，但它们绝对不是用于一般DOM操作的

使用DOM方法

首先，将所有LI元素加载到一个数组中。然后使用排序函数对它们进行排序。然后将它们放回用UL元素包装的DOM中，并在每次第一个字母更改时用跨距分隔

编辑 这里有一个函数可以完成这项工作。它对lIs进行排序，不确定是否真的需要。如果没有，函数将变得简单得多

<script type="text/javascript">

// Simple helper
function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent.replace(/^\s+|\s+$/g,'');
  }
  if (typeof el.innerText == 'string') {
    return el.innerText.replace(/^\s+|\s+$/g,'');
  }
}

function sortLIs(id) {
  // Get the element
  var el = document.getElementById(id);

  // Get the UL element that will be replaced
  var sourceUl = el.getElementsByTagName('ul')[0];

  // Get the LIs and put them into an array for sorting
  var nodes = sourceUl.getElementsByTagName('li');
  var li, lis = [];

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    lis[i] = nodes[i];
  }

  // Sort them
  lis.sort(function(a, b) {
    return  getText(a) > getText(b)? 1 : -1;
  });

  // Now put them into the document in different ULs separated
  // by spans.
  // Create some temporary elements for cloning
  var ul, ulo = document.createElement('ul');
  var sp, spo = document.createElement('span');
  var frag = document.createDocumentFragment(); // fragments are handy
  var firstChar, currentChar;

  // For each LI in the array...
  for (i=0; i<iLen; i++) {
    li = lis[i];
    firstChar = getText(li).substr(0,1) || '';

    // If first char doesn't match current, create a new span
    // and UL for LIs
    if (firstChar !== currentChar) {
      currentChar = firstChar;

      // New span
      sp = spo.cloneNode(false);
      sp.appendChild(document.createTextNode(firstChar.toUpperCase()));
      sp.id = firstChar;
      frag.appendChild(sp);

      // New UL
      ul = ulo.cloneNode(false);
      frag.appendChild(ul);
    }

    // Add the li to the current ul
    ul.appendChild(li);
  }

  // Replace the UL in the document with the fragment
  el.replaceChild(frag, sourceUl);
}

</script>


<div id="x">
    <ul>
        <li>Cherry
        <li>Banana
        <li>Apple
        <li>Blueberry
        <li>Cranberry
        <li>Blackberry
    </ul>
</div>

<button onclick="sortLIs('x');">Sort</button>

//简单助手
函数getText（el）{
if（type of el.textContent=='string'）{
返回el.textContent.replace（/^\s+|\s+$/g'）；
}
if（type of el.innerText=='string'）{
返回el.innerText.replace（/^\s+|\s+$/g'）；
}
}
功能分类（id）{
//获取元素
var el=document.getElementById（id）；
//获取要更换的UL元件
var sourceUl=el.getElementsByTagName（'ul'）[0]；
//获取LIs并将其放入数组中进行排序
var nodes=sourceUl.getElementsByTagName（'li'）；
var li，lis=[]；
对于（var i=0，iLen=nodes.length；i getText（b）？1:-1；
});
//现在将它们分别放在不同的ULs文件中
//按跨度。
//创建一些用于克隆的临时元素
var ul，ulo=document.createElement（'ul'）；
var sp，spo=document.createElement（'span'）；
var frag=document.createDocumentFragment（）；//碎片很方便
var firstChar，currentChar；
//对于数组中的每个LI。。。
对于（i=0；iHTML:


苹果
香蕉
黑莓
蓝莓
樱桃
蔓越莓



JavaScript:
var list=document.querySelector（'#x ul'），
newUl=document.getElementById（'new'），
水果=[]，
key=“A”；
对于（var i=0；i嗯，这就是我完成它的方式：

var allLists, elements, item, lastLetter, lastUl, letter, page, span, _i, _len;

page = document.getElementById("x");
allLists = page.getElementsByTagName("li");
lastLetter = null;
lastUl = null;
elements = document.createDocumentFragment();

for (_i = 0, _len = allLists.length; _i < _len; _i++) {
  item = allLists[_i];
  letter = item.innerText[0].toUpperCase();
  if (letter !== lastLetter) {
    lastLetter = letter;
    span = document.createElement('span');
    span.innerText = letter;
    span.id = letter;
    elements.appendChild(span);
    lastUl = document.createElement('ul');
    elements.appendChild(lastUl);
  }
  lastUl.appendChild(item.cloneNode(true));
}

while (page.firstChild) page.removeChild(page.firstChild);

page.appendChild(elements.cloneNode(true));

var所有列表、元素、项目、lastLetter、lastUl、字母、页面、跨度、长度；
page=document.getElementById（“x”）；
AllList=page.getElementsByTagName（“li”）；
lastLetter=null；
lastUl=null；
elements=document.createDocumentFragment（）；
对于（_i=0，_len=allLists.length；_i<_len；_i++）{
项目=所有列表[_i]；
字母=项。innerText[0]。toUpperCase（）；
如果（字母！==最后一个字母）{
lastLetter=字母；
span=document.createElement（'span'）；
span.innerText=字母；
span.id=字母；
元素。子元素（span）；
lastUl=document.createElement（'ul'）；
元素。追加子元素（lastUl）；
}
lastUl.appendChild（项克隆节点（真））；
}
while（page.firstChild）page.removeChild（page.firstChild）；
page.appendChild（elements.cloneNode（true））；

看到这里的工作：
我想你可能没有理解jQuery的要点，它不是为了让事情变得更困难；现在大多数人不应该再学习直接的javascript了。@SLaks:它是有效的-
元素不需要结束标记。@SLaks how？在我看来很好。应该删除这个注释@BoltClock-在HTML5中，但不是Firefox（可能还有其他版本）然而，HTML5的一个目的是记录浏览器中的内容，因此它的存在实际上只是记录当前浏览器的常见功能，并鼓励其他人效仿。@Godwin jQuery是为了进行抽象和规范化。它不是为了避免学习javascript。请不要建议人们使用抽象和规范hey Don don Understand我已经把它们放在一个数组中，按字母顺序排列。我只是不知道如何把所有的都以A开头，然后把它们放进一个自己的
ul
。谢谢你的回复（顺便说一句：）此外，我也不太确定DOM方法是什么……我做了一些研究，我猜它与创建和插入元素有关？o.o仍在等待您的示例。：如果您已经
var allLists, elements, item, lastLetter, lastUl, letter, page, span, _i, _len;

page = document.getElementById("x");
allLists = page.getElementsByTagName("li");
lastLetter = null;
lastUl = null;
elements = document.createDocumentFragment();

for (_i = 0, _len = allLists.length; _i < _len; _i++) {
  item = allLists[_i];
  letter = item.innerText[0].toUpperCase();
  if (letter !== lastLetter) {
    lastLetter = letter;
    span = document.createElement('span');
    span.innerText = letter;
    span.id = letter;
    elements.appendChild(span);
    lastUl = document.createElement('ul');
    elements.appendChild(lastUl);
  }
  lastUl.appendChild(item.cloneNode(true));
}

while (page.firstChild) page.removeChild(page.firstChild);

page.appendChild(elements.cloneNode(true));