Js проблемы с манипулированием DOM div

В настоящее время я изучаю DOM и обнаружил, что следующую задачу довольно сложно выполнить должным образом. Предполагается, что код js:

  1. добавить новые div, как продолжение существующих,
  2. удалить существующие div,
  3. изменить цвет одного div,
  4. переключить все текстовое содержимое div. Мои проблемы: Задача 1. работает, но уродливо, новые div добавляются непрерывно, я бы предпочел видеть их в вертикальном порядке, как существующие Задача 4. работает только для первого div. Остальное остается как есть.

      function myFunctionAdd() {
        var node = document.createElement("outerDiv");
        var textnode = document.createTextNode("My Vertical Div#");
        node.appendChild(textnode);
        document.getElementById("add").appendChild(node);
      }
      function myFunctionRem() {
        document.getElementById("innerDiv1").outerHTML = "";
      }
      function myFunctionColour() {
        document.getElementsByTagName("z4")[0].setAttribute("class", "democlass");
      }
            function myFunctionChangeText() {
        var x = "a new txt";
        for (var i = 0; i < 4; i++){
            document.getElementById("innerDiv1").innerHTML = x;
      }
}
  .democlass {
  color: blue;
}
   <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Tytul dokumentu</title>
    <meta http-equiv = "content-type" content = "text/html;charset=utf-8" />
    <link rel = "stylesheet" href = "styles.css">
  </head>
  <body>
    <header>
      <button onclick = "myFunctionAdd()">New div</button>
      <button onclick = "myFunctionRem()">Remove divs</button>
      <button onclick = "myFunctionColour()">Colour change</button>
      <button onclick = "myFunctionChangeText()">Div's new text</button>
    </header>
    <ul>
      <li id = "">
                <div class = "innerDiv1" myattr = "">
                  <p> My Vertical Div1 </p>
                </div>
      </li>
      <li>
                <div class = "innerDiv1" myattr = "">
                    <p>My Vertical Div2 </p>
                </div>
      </li>
       <li>
                <div class = "innerDiv1" myattr = "4">
                    <z4>My Vertical Div3 </z4>
                </div>
       </li>
       <li id = "add">
                <div class = "innerDiv" myattr = "">
                    <p>My Vertical Div4</p>
                </div>
       </li>
            
    </ul>
     
  </body>
</html>

Вы начинаете с недопустимой структуры html. <div> не может быть прямым дочерним элементом <ul>, а <li> должен быть дочерним элементом <ul> и не может быть дочерним элементом <div>

charlietfl 20.12.2020 16:04

Также вы не можете повторять идентификаторы элементов, они уникальны по определению. Вместо этого используйте общий класс для повторяющихся элементов

charlietfl 20.12.2020 16:06

спасибо, я внес некоторые изменения.

Wojciech Mierzejewski 20.12.2020 16:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот рабочая версия, лучше всего сравнивающая различия, чтобы увидеть, что было изменено.

Использование div в качестве дочернего элемента <ul> недопустимо, оно должно быть <li>

Такие теги, как <z4>, не являются частью стандарта HTML, и хотя вы можете создавать свои собственные теги, они должны быть правильно зарегистрированы и следовать строгому соглашению об именах, чтобы предотвратить конфликты новых тегов HTML в будущем.

id элементов должен быть уникальным

  <html>
      <head>
        <title>Tytul dokumentu</title>
        <meta http-equiv = "content-type" content = "text/html;charset=utf-8" />
        <link rel = "stylesheet" href = "styles.css">
        <script>
          function myFunctionAdd() {
            var li = document.createElement("li");
            var div = document.createElement("div");
            var p = document.createElement("p");
            
            li.appendChild(div);
            div.appendChild(p);
            
            p.textContent = "My Vertical Div#";
            
            document.getElementById("list").appendChild(li);
          }

          function myFunctionRem() {
            let list = document.getElementById("list");
            let deleteChild = list.firstElementChild;
            
            if (deleteChild) {
                list.removeChild(deleteChild);
             }
          }
          function myFunctionColour() {
           let list = document.getElementById("list");
            let items = list.children.length;
            
            for (var i = 0; i < items; i++){
                let li = list.children[i]
                li.className = "democlass";
            }
          }
          function myFunctionChangeText() {
            var x = "a new txt";
            
            let list = document.getElementById("list");
            let items = list.children.length;
            
            for (var i = 0; i < items; i++){
                let li = list.children[i]
                let div = li.firstElementChild;
                let p = div.firstElementChild;
                p.textContent = x;
            }
    }
        </script>
      </head>
      <style>
      .democlass {
      color: blue;
    }
      </style>
      <body>
        <header>
          <button onclick = "myFunctionAdd()">New div</button>
          <button onclick = "myFunctionRem()">Remove divs</button>
          <button onclick = "myFunctionColour()">Colour change</button>
          <button onclick = "myFunctionChangeText()">Div's new text</button>
        </header>
        <ul id = "list">
            <li>
              <div id = "innerDiv1">
                <p> My Vertical Div1 </p>
              </div>
            </li>
            <li>
              <div id = "innerDiv2">
                <p>My Vertical Div2 </p>
              </div>
            </li>
            <li>
              <div id = "innerDiv3">
                <p>My Vertical Div3 </p>
              </div>
            </li>
            <li>
              <div id = "innerDiv4">
                <p>My Vertical Div4</p>
              </div>
            </li>
        </ul>
      </body>
    </html>

На самом деле разрешено создавать пользовательские элементы в браузерах, которые их поддерживают, но сначала их необходимо правильно определить. Я сомневаюсь, что ОП готов к этому, хотя

charlietfl 20.12.2020 16:53

Обновлена ​​часть о пользовательских тегах

John 20.12.2020 17:31

Честно говоря, я не думаю, что OP даже понял, что они использовали идентификатор другого элемента в createElement, а не имя тега.

charlietfl 20.12.2020 17:33

Другие вопросы по теме