Este artículo comparte dos métodos para crear elementos para su referencia. El contenido específico es el siguiente
1) empalme los elementos que necesita crear en forma de una cadena; Encuentre el elemento principal y asigne directamente el interno del elemento principal.
2) Use algunas funciones proporcionadas por los objetos de documento y elemento para lograr la creación dinámica de elementos (crear elementos => encontrar elementos principales => insertar elementos en la posición especificada)
1. Formulario de empalme de cadena
Para una mejor comprensión, establezca un escenario de aplicación.
Genere aleatoriamente un conjunto de números, represente este conjunto de datos en un gráfico de barras y colóquelo en div [id = "contenedor"], como se muestra en la figura a continuación
<div id = "contenedor"> </div> <script> window.onload = function () {var str = ''; for (var i = 0; i <30; i ++) {var r = parseInt (math.random ()*100); // Generar un número str+= '<div>'+r+'</div>'; // Split str} document.getElementById ('Container'). InnerHtml = str; } </script>2. Use algunas funciones que vienen con objetos de documento y elemento
También establezca un escenario de aplicación, como se muestra en la figura a continuación
Obtenga la información en la entrada e insértela a la izquierda o derecha del rectángulo rojo a continuación de acuerdo con el botón a la derecha.
La solución se divide en tres pasos:
1. Crear elemento: document.createElement ()
2. Encuentre el elemento principal: puede coincidir con el selector CSS especificado a través de ID, nombre, nombre de etiqueta, clase y coincidir con el selector CSS especificado
3. Inserte elementos en la posición especificada: element.appendChild (), element.insertbefore ()
Código de implementación:
<div id = "div-input"> <input type = "text" id = "txt_input" value = "4"/> <input type = "button" id = "leftInsert" value = "leftInsert"/> <input type = "button" id = "rightInsert" value = "rightInsert"/> </div> <d id = "contenedor"> <pan> 1 </span> <span> 2 </span </span </rightInsert "/> </div> <d id =" contenedor "> <pan> 1 </span> <span> 2 </span </span </rightInsert"/> </div> <d id = "contenedor"> <pan> 1 </span> <span> 2 </span </span </rightInsert "/> </div> <d id =" contenedor "> <pan> <span> 3 </span> </div> <script> window.onload = function () {var inputValue = document.getElementById ('txt_input'). valor; document.getElementById ('LeftInsert'). OnClick = function () {// Entrada var de la amplitud en el lado izquierdo = document.createElement ('span'); // 1. Crear elemento span.innerhtml = inputValue; var contenedor = document.getElementById ('Container'); // 2. Encuentre el contenedor del elemento principal. // Insertar en el documento de la izquierda} .getElementById ('RightInsert'). OnClick = function () {// Entrada var de var en el lado derecho = document.createElement ('span'); // 1. Crear elemento span.innerhtml = inputValue; var contenedor = document.getElementById ('Container'); // 2. Encuentre el contenedor del elemento principal.appendChild (span); // 3. Agregar elemento al final}} </script>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.