Un breve análisis de JS creando dinámicamente elementos [dos métodos]

Prefacio :

Hay dos formas de crear elementos

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 la etiqueta, clase y
3. Insertar elementos en la ubicació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>

El breve análisis anterior de los elementos de creación dinámicos JS [dos métodos] es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.