Эта статья разделяет два метода создания элементов для вашей ссылки. Конкретный контент заключается в следующем
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 через идентификатор, имя, имя метки, класс и соответствовать указанному селектору 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 = "> <proan> 1 </span> </> </div> <div Id ="> <pran> 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>Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.