JSFiddle - React, Tailwind, and code Playground

by fsy0718

HTML

<div id="container">
    <div id="operatorSpace">
      <h1> 操作区</h1>
      <ul id="box">
        <li class="li_1">第&nbsp;1&nbsp;行li</li>
        <li class="li_2">第&nbsp;2&nbsp;行li</li>
        <li class="li_3">第&nbsp;3&nbsp;行li</li>
        <li class="li_4">第&nbsp;4&nbsp;行li</li>
        <li class="li_5">第&nbsp;5&nbsp;行li</li>
      </ul>
    </div>
    <!--test show start-->
    <h1>操作结果展示区</h1>
    <ul id="showSpace"></ul>
    <!--test show end-->
  </div>

JavaScript

$box = document.getElementById('box');
$oShowSpace = document.getElementById('showSpace');
public_fn = function(ele, p_ele, msg) {
  var $ele;
  if (ele == null) {
    ele = 'li';
  }
  if (p_ele == null) {
    p_ele = $oShowSpace;
  }
  $ele = document.createElement(ele);
  $ele.innerHTML = msg;
  if (p_ele.children.length) {
    return p_ele.insertBefore($ele, p_ele.firstChild);
  } else {
    return p_ele.appendChild($ele);
  }
};
public_node = function(type, ele) {
  if (ele.type.nodeType === 1) {
    return ele.type;
  } else {
    switch (type) {
      case 'lastChild':
        return (function() {
          var $ele;
          $ele = ele.lastChild.previousSibling;
          while ($ele && $ele.nodeType !== 1) {
            $ele = $ele.previousSibling;
          }
          return $ele;
        })();
      case 'firstChild':
        return (function() {
          var $ele;
          $ele = ele.firstChild.nextSibling;
          while ($ele && $ele.nodeType !== 1) {
            $ele = $ele.nextSibling;
          }
          return $ele;
        })();
      default:
        return '[]';
    }
  }
};
public_fn('li', null, 'children共有：' + $box.children.length + '个');
  public_fn('li', null, 'childNodes共有：' + $box.childNodes.length + '个');
  public_fn('li', null, 'lastChild是：' + public_node('lastChild', $box).tagName);