Как добавить новый контент в событие нажатия кнопки на javascript?

Я новичок в программировании, поэтому мог допустить некоторые, даже очевидные ошибки.

Теперь я работаю над небольшим скриптом, в котором я хотел бы добавить новый контент в абзац после div, который я создал при двух условиях (если, иначе).

если что-то написано, то поместите текст в div и консоль.

иначе создайте элемент <p> и напишите, что текст необходим после элемента div.

Я установил код, но консоль в Chrome говорит, что

DivI.insertAfter(p, Div) is not a function

в свойстве onclick (HTML) внутри кнопки.

Даже DivT.appendChild(text) не работает.

Следуя руководству, данному Brackets, I внутри if, создал новую переменную DivT и добавил текст (createTextNode) внутри DivT.

Внутри else я создал новый элемент <p>, вставил внутрь текст, создал 2 переменные, чтобы использовать метод insertAfter, как это было написано в руководстве.

Один для указания места добавления, а другой - для указания, после какого элемента помещается элемент <p>.

Я не могу заставить это работать.

Вот код.

HTML

           <input type = "text" id = "scrivimi">

           <button type = "button" onloadend = "Cliccando()" 
           onclick = "Cliccando()">
            Clicca 
           </button>

    <div id = "Div"></div>

Помимо заголовка, это единственные элементы на странице.

Javascript

        function Cliccando() {
          var testo2 = document.getElementById('scrivimi').value;
            if ( testo2 != '')
                {
                    alert('js qualcosa scritto');
                    console.info(testo2);
                    var DivT = document.getElementsByTagName('div');
                    var DelTesto = document.createTextNode(testo2);
                    DivT.appendChild(DelTesto);
                   }
                else {
                      alert (' js vuoto');
                      var p = document.createElement("p");
                      var Contenuto = document.createTextNode('Scrivi del testo');
                p.appendChild(Contenuto);
                var DivI= document.getElementById('Div');
                var Div = document.getElementById('Div');
                DivI.insertAfter(p, Div);

            }

     }

JS имеет insertBefore, но не insertAfter. См. Обходной путь в этот вопрос

Hamms 25.05.2018 00:25

Я бы создал div в html и предоставил display - block или none для функции JavaScript по мере необходимости.

A J 25.05.2018 00:26

Кроме того, причина, по которой вы получаете сообщение об ошибке с appendChild, заключается в том, что getElementsByTagName возвращает HTMLCollection - это не просто отдельный узел. Я бы рекомендовал вместо этого использовать getElementById

Hamms 25.05.2018 00:26

Проблема решена, спасибо!

Vittorio D'angiolino 25.05.2018 15:18
Поведение ключевого слова "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) для оценки ваших знаний,...
1
4
470
0

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