Как по нажатию кнопки вставить текст как вложенный список?

Question

У меня есть 2 поля (индекс и текст) и 2 кнопки, нажимая на первую в список вставляется текст после указанного индекса на этом же уровне, а нажимая вторую в список вставляется текст как вложенный список (его уровень будет на один уровень ниже).

Список я представил, как:

...
...

2.1. ...

Как можно вставить текст в виде вложенного списка?

Код:

<html>
<head>
    <meta charset="windows-1251" />
    <style>
        ol {
            list-style: none;
            counter-reset: li;
        }

        li:before {
            counter-increment: li;
            content: counters(li,".") ". ";
        }
    </style>
    <script language="JavaScript">
        function AddNewLine() {

        }

        function AddCurrentLine() {
            var index = document.getElementById("index").value;
            var text = document.getElementById("text").value;

            if (index == "" || text == "")
                return;

            var ol = document.getElementsByTagName("ol")[0];
            var li = document.createElement("li");
            li.innerHTML = text;
            var ind = document.getElementsByTagName("li")[index]
            ol.insertBefore(li, ind);
        }
    </script>
</head>
<body>
    <form>
        <fieldset style="width:600Px;height:150Px">
            <legend>Вставка в список</legend>
            Введите номера элемента списка, после которого нужно осуществлять вставку:<br>
            <input type="number" id="index" in> <br>
            <br>Введите текст, который нужно вставить:<br>
            <input type="text" id="text"> <br> <br>
            <input type="button" value="Вставить на этом уровне" id="button1" style="width:200Px;height:25Px" onclick="AddCurrentLine()"> 
            <input type="button" value="Вставить на уровне ниже" id="button2" style="width:200Px;height:25Px" onclick="AddNewLine()">
        </fieldset>

        <ol>
            <li>L1
            <ol>
                    <li>L1.1</li>
                    <li>L1.2</li>
                    <li>L1.3</li>
            </ol>
            </li>
            <li>L2</li>
            <li>L3</li>
        </ol>

    </form>
</body>
</html>

Answer 1

Теперь и у меня есть два поля и две кнопки!

Чтобы кода было по минимуму и легче было разобраться, использовал небезопасный метод insertAdjacentHTML, поэтому в реальном проекте, будьте добры, замените или добавьте валидацию ввода текста.

const oIndex = document.getElementById("index");
const oText = document.getElementById("text");
const oRoot = document.querySelector('ol.root');
let aRootItems;
fMaxLevel();

function fAddCurrentLine() {
  if (oIndex.value == "" || oText.value == "") { return false; }
  aRootItems[+oIndex.value - 1].insertAdjacentHTML('afterend', `<li  class="">${oText.value}</li>`);
  fMaxLevel();
}

function fAddNewLine() {
  if (oIndex.value == "" || oText.value == "") { return false; }
  let oTarget = aRootItems[+oIndex.value - 1].querySelector('ol');
  if (oTarget) {
    oTarget.insertAdjacentHTML('beforeend', `<li class="">${oText.value}</li>`);
  } else {
    aRootItems[+oIndex.value - 1].insertAdjacentHTML('beforeend', `<ol class="sub"><li class="">${oText.value}</li></ol>`);
  }
  fMaxLevel();
}

function fMaxLevel() {
  aRootItems = oRoot.children;
  oIndex.setAttribute('max', aRootItems.length);
}

ol { list-style: none; counter-reset: li; }
li:before { counter-increment: li; content: counters(li, ".") ". "; }
input { width: 180px; }

<form>
  <fieldset>
    <legend>Вставка в список</legend>
    Введите номера элемента списка, после<br>которого нужно осуществлять вставку:<br>
    <input type="number" id="index" min="1" value="1"><br>
    <br> Введите текст, который нужно вставить:<br>
    <input type="text" id="text" value="Новый"><br><br>
    <input type="button" value="Вставить на этом уровне" id="button1" onclick="fAddCurrentLine()">
    <input type="button" value="Вставить на уровне ниже" id="button2" onclick="fAddNewLine()">
  </fieldset>
  <ol class="root">
    <li>уровень
      <ol>
        <li>подуровень</li>
        <li>подуровень</li>
        <li>подуровень</li>
      </ol>
    </li>
    <li>уровень</li>
    <li>уровень</li>
  </ol>
</form>

Если будут нужны пояснения, то дайте знать в комментарии под ответом.

БЛОГ НА HUSL

Как по нажатию кнопки вставить текст как вложенный список?

Ответы (1 шт):