Uma breve análise do JS criando dinamicamente elementos [dois métodos]

Prefácio :

Existem duas maneiras de criar elementos

1) ceda os elementos que você precisa criar na forma de uma string; Encontre o elemento pai e atribua diretamente o InnerHTML do elemento pai.

2) Use algumas funções fornecidas pelos objetos de documentos e elementos para obter a criação dinâmica de elementos (Create Elements => Encontre os elementos dos pais => Inserir elementos na posição especificada)

1. Formulário de splicing de cordas

Para uma melhor compreensão, defina um cenário de aplicativo.

Gerar aleatoriamente um conjunto de números, renderizar esse conjunto de dados em um gráfico de barras e coloque -os em div [id = "contêiner"], como mostrado na figura abaixo

 <div id = "contêiner"> </div> <cript> window.onload = function () {var str = ''; for (var i = 0; i <30; i ++) {var r = parseint (math.random ()*100); // gerar aleatório um número str+= '<div>'+r+'</div>'; // split str} document.getElementById ('contêiner'). Innerhtml = str; } </script>

2. Use algumas funções que acompanham objetos de documentos e elementos

Defina também um cenário de aplicativo, conforme mostrado na figura abaixo

Obtenha as informações na entrada e insira -as à esquerda ou à direita do retângulo vermelho abaixo de acordo com o botão à direita.

A solução é dividida em três etapas :

1. Criar elemento: document.createElement ()
2. Encontre o elemento pai: ele pode corresponder ao seletor de CSS especificado por meio de ID, nome, nome da tag, classe e
3. Insira elementos no local especificado: element.appendchild (), element.insertBefore ()

Código de implementação:

 <div id = "Div-input"> <input type = "text" id = "txt_input" value = "4"/> <input type = "button" id = "leftInsert" value = "leftInsert"/> <input Type = "Button" Id = "diretoMert" Value = "RightInsert"////</<DIG> <DID = "Container"> <pan> 3 </span> </div> <cript> window.onload = function () {var inputValue = document.getElementById ('txt_input'). document.getElementById ('leftInsert'). OnClick = function () {// Entrada var span no lado esquerdo = document.createElement ('span'); // 1. Criar elemento span.innerhtml = inputValue; var container = document.getElementById ('contêiner'); // 2. Encontre o contêiner do elemento pai.InsertBefore (span, container.ChildNodes [0]); // Insira no mais à esquerda} document.getElementById ('RightInsert'). OnClick = function () {// Entrada var span no lado direito = document.createElement ('span'); // 1. Criar elemento span.innerhtml = inputValue; var container = document.getElementById ('contêiner'); // 2. Encontre o contêiner do elemento pai.appendChild (span); // 3. Adicionar elemento no final}} </script>

A análise breve acima dos elementos de criação dinâmica do JS [dois métodos] é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.