Краткий анализ JS Динамически создает элементы [два метода]

Предисловие :

Есть два способа создания элементов

1) сплачивать элементы, необходимые для создания в форме строки; Найдите родительский элемент и непосредственно назначьте innerhtml родительского элемента.

2) Используйте некоторые функции, предоставленные объектами документа и элемента для достижения динамического создания элементов (создать элементы => найти родительские элементы => вставить элементы в указанную позицию)

1. Форма сплайсинга строки

Для лучшего понимания установите сценарий приложения.

Случайно генерируйте набор чисел, визует этот набор данных в стержню и поместите его в div [id = "intainer"], как показано на рисунке ниже

 <div id = "container"> </div> <script> window.onload = function () {var str = ''; for (var i = 0; i <30; i ++) {var r = parseint (math.random ()*100); // Случайное генерирование числа str+= '<div>'+r+'</div>'; // Split str} document.getElementById ('intainer'). Innerhtml = str; } </script>

2. Используйте некоторые функции, которые поставляются с объектами документа и элемента

Также установите сценарий приложения, как показано на рисунке ниже

Получите информацию на входе и вставьте ее влево или справа от красного прямоугольника внизу в соответствии с кнопкой справа.

Решение разделено на три шага :

1. Создать элемент: document.createElement ()
2. Найдите родительский элемент: он может соответствовать указанному селектору CSS через идентификатор, имя, имя тега, класс и
3. Вставьте элементы в указанном месте: element.appendchild (), element.insertbefore ()

Код реализации:

 <div id = "div-input"> <input type = "text" id = "txt_input" value = "4"/> <input type = "кнопка" id = "LeftInsert" value = "LeftInsert"/> <input Type = "id =" rightInsert "value =" rightInsert "/> </div> <div Id =" container "> <pran> 1 </span> </> </div> <div id ="> <proan> 1 </span> </> </div> <div id = "> <pran> 1 </span> </> </div> <div id ="> <proan> 1 </span> </> </div> </div id = " <pran> 3 </span> </div> <script> window.onload = function () {var inputValue = document.getElementByid ('txt_input'). value; document.getElementById ('LeftInsert'). OnClick = function () {// Входной вар -пролет с левой стороны = document.createElement ('span'); // 1. Создать элемент span.innerhtml = inputValue; var container = document.getElementbyId ('intainer'); // 2. Найти контейнер исходного элемента. Insertbefore (span, intainer.childnodes [0]); // Вставка в самый левый} document.getElementById ('rightInsert'). OnClick = function () {// Входной вар -пролет с правой стороны = document.createElement ('span'); // 1. Создать элемент span.innerhtml = inputValue; var container = document.getElementbyId ('intainer'); // 2. Найти родительский элемент контейнер.appendChild (SPAN); // 3. Добавить элемент в конце}} </script>

Приведенный выше краткий анализ элементов динамического создания JS [два метода] - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.