Este artigo compartilha dois métodos de criação de elementos para sua referência. O conteúdo específico é o seguinte
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: você pode corresponder ao seletor CSS especificado por meio de ID, nome, nome da etiqueta, classe e corresponder ao seletor de CSS especificado
3. Insira elementos na posição especificada: 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 = "RECTENIMERT" = " <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>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.