Criando um elemento div em jQuery [duplicado]

Question

Esta questão já tem uma resposta aqui:

• jQuery document.createElement equivalente? 13 respostas

Como faço para criar um elemento div em jQuery ?

Answer 1

Você pode usar append (para adicionar a última posição do pai) ou prepend (para adicionar na posição punho do pai):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

Como alternativa, você pode usar o .html() ou .add() como mencionado em um diferente resposta .

Answer 2

A partir de jQuery 1.4 você pode passar atributos a um elemento auto-fechado assim:

jQuery('<div/>', {
    id: 'some-id',
    "class": 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

Aqui é no Docs

Exemplos podem ser encontrados em jQuery 1.4 Liberado: os 15 novos recursos que você deve saber

.

Answer 3

Tecnicamente $('<div></div>') vai 'criar' um elemento div (ou mais especificamente um elemento DIV DOM), mas não vai adicionar ao seu documento HTML. então você vai precisar usar isso em combinação com as outras respostas para realmente fazer algo de útil com ele (como usar o método append() ou algo semelhante).

O documentação manipulação dá-lhe todas as várias opções sobre como adicionar novos elementos.

Answer 4

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

Answer 5

div = $("<div>").html("Loading......");
$("body").prepend(div);    

Answer 6

$("<div/>").appendTo("div#main");

anexará um espaço em branco div para <div id="main"></div>

Answer 7

Um curto maneira de criar div é

var customDiv = $("<div/>");

Agora, o div personalizado pode ser anexado a qualquer outra div.

Answer 8

Todos estes funcionou para mim,

HTML parte:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

código JavaScript:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>

Answer 9

$("<div/>").attr('id','new').appendTo('body');    

Isto irá criar um novo div com id "novo" no corpo.

Answer 10

document.createElement('div');

Answer 11

Aqui é outra técnica para criar divs com jQuery.

ELEMENT CLONAGEM

Digamos que você tenha um div existente em sua página que você quer clone usando jQuery (por exemplo para duplicar uma entrada de um número de vezes em um formulário). Você poderia fazê-lo da seguinte forma.

$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
  <div>
    Div
  </div>
</div>

<button id="clone_button">Clone me!</button>

Answer 12

Criar um DIV na memória

$("<div/>");

Adicionar Clique manipuladores, estilos etc - e, finalmente, INSERT INTO DOM em um seletor de elemento de destino:

$("<div/>", {

  // PROPERTIES HERE
  
  text: "Click me",
  id: "example",
  "class": "myDiv",      // ('class' is still better in quotes)
  css: {           
    color: "red",
    fontSize: "3em",
    cursor: "pointer"
  },
  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },
  append: "<i>!!</i>",
  appendTo: "body"      // Finally, append to any selector
  
}); // << no need to do anything here as we defined the properties internally.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_{Semelhante a resposta de Ian, mas eu achei nenhum exemplo que aborda adequadamente o uso de métodos em As propriedades do objeto declaração então lá vai.}

Answer 13

simplesmente se você quiser criar qualquer tag HTML você pode tentar este por exemplo

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

Se você quiser adicionar qualquer elemento na Flay você pode tentar este

selectBody.append(div);

Answer 14

<div id="foo"></div>

$('#foo').html('<div></div>');

Answer 15

Se você estiver usando Jquery> 1.4, você é melhor de com de Ian resposta . Caso contrário, gostaria de usar este método:

Isto é muito semelhante ao resposta , mas eu não sei por que eles usaram document.createElement em vez de notação Jquery.

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

Eu também acho que usando append() com uma função de retorno é, neste caso, mais legível, porque agora você imediatamente que algo vai ser anexado ao corpo. Mas isso é uma questão de gosto, como sempre, ao escrever qualquer código ou texto.

Em geral, o uso como menos HTML quanto possível no código JQuery, uma vez que este é principalmente código espaguete. É propenso a erros e difícil de manter, porque o HTML-String pode facilmente conter erros. Além disso, ele combina uma linguagem de marcação (HTML) com uma linguagem de programação (JavaScript / jQuery), que normalmente é uma má idéia.

Answer 16

alternativamente para anexar () você também pode usar appendTo() que tem uma sintaxe diferente:

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");    

Answer 17

Você pode criar marcas separadas, utilizando o método .jquery(). E criar tags filhas usando o método .append(). Como jQuery suportes encadeamento, você também pode aplicar CSS de duas maneiras. Ou especificá-lo na classe ou apenas chamada .attr():

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

Em primeiro lugar eu estou anexando uma lista de etiquetas à minha tag div e inserir dados JSON para ele. Em seguida, eu estou criando um tag filho da lista, desde algum atributo. Tenho atribuído o valor de uma variável, de modo que seria fácil para mim anexá-lo.

Answer 18

Eu acho que essa é a melhor maneira de adicionar um div:

Para anexar uma div teste para o elemento div com ID div_id:

$("#div_id").append("div name along with id will come here, for example, test");

Agora anexar HTML a esta div teste acrescentou:

$("#test").append("Your HTML");

Answer 19

Se é apenas um div vazio, isso é suficiente:

$("#foo").append("<div>")

ou

$("#foo").append("<div/>")

Ela dá o mesmo resultado.

Answer 20

Espero que ajude código. :) (eu uso)

function generateParameterForm(fieldName, promptText, valueType) {
    //<div class="form-group">
    //<label for="yyy" class="control-label">XXX</label>
    //<input type="text" class="form-control" id="yyy" name="yyy"/>
    //</div>

    // Add new div tag
    var form = $("<div/>").addClass("form-group");

    // Add label for prompt text
    var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);

    // Add text field
    var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);

    // lbl and inp => form
    $(form).append(label).append(input);

    return $(form);
}

Answer 21

sucesso $(HTMLelement) lata ele. Se você quiser um epmty div usá-lo como $('<div></div>');. Além disso, você pode definir os outros elementos pelo mesmo método. Se você quer mudar HTML interna após criado, você pode usar o método html(). Para get outerHTML como string que você pode usar é assim:

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;

Answer 22

Você pode usar .add() para criar um novo jQuery objeto e adicionar o elemento alvo. Use encadeamento, em seguida, para prosseguir.

Por exemplo jQueryApi :

$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );

 div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 23

Como sobre isso? Aqui, pElement refere-se ao elemento que você quer isso dentro div (para ser um filho de:!).

$("pElement").append("<div></div");

Você pode facilmente adicionar mais nada a que div na string - Atributos, conteúdo, o nome dele. Observe, para valores de atributos, você precisa usar as aspas direitas.

Answer 24

Eu apenas fez um pequeno plugin jQuery para isso.

Segue-se a sintaxe:

var myDiv = $.create("div");

DOM ID nó pode ser especificado como segundo parâmetro:

var secondItem = $.create("div","item2");

É sério? Não. Mas essa sintaxe é melhor do que $ ( "

") , e é um valor muito bom para que o dinheiro.

(Resposta parcialmente copiado de: jQuery document.createElement equivalente )