Как создать элемент div в jQuery?
Вы можете использовать append (чтобы добавить в последнюю позицию родителя) или prepend (чтобы добавить в первую позицию родителя):
$('#parent').append('<div>hello</div>');
// or
$('<div>hello</div>').appendTo('#parent');
Кроме того, вы можете использовать .html() или .add() как указано в другом ответе.
Начиная с jQuery 1.4 вы можете передавать атрибуты самозакрывающемуся элементу следующим образом:
jQuery('<div/>', {
id: 'some-id',
"class": 'some-class',
title: 'now this div has a title!'
}).appendTo('#mySelector');
Вот это в Документах
Примеры можно найти на jQuery 1.4: 15 новых функций, которые вы должны знать.
Технически $('<div></div>') будет "создавать" элемент div (или, более конкретно, элемент DIV DOM), но не добавит его в ваш HTML-документ. Затем вам нужно будет использовать это в сочетании с другими ответами, чтобы фактически сделать с ним что-нибудь полезное (например, с помощью метода append() или тому подобного).
Документация по манипуляции дает вам все возможные варианты добавления новых элементов.
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();
});
div = $("<div>").html("Loading......");
$("body").prepend(div);
$("<div/>").appendTo("div#main");
добавит пустой div в <div id="main"></div>
Короткий способ создания div -
var customDiv = $("<div/>");
Теперь пользовательский div может быть добавлен к любому другому div.
Все это сработало для меня,
Часть HTML:
<div id="targetDIV" style="border: 1px solid Red">
This text is surrounded by a DIV tag whose id is "targetDIV".
</div>
Код 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, Qaru users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>
//Way 3: html()
<script type="text/javascript">
$("#targetDIV").html("<div>Hello, Qaru users</div>"); //.html(): Clean HTML inside and append
</script>
//Way 4: append()
<script type="text/javascript">
$("#targetDIV").append("<div>Hello, Qaru users</div>"); //Same as appendTo
</script>
$("<div/>").attr('id','new').appendTo('body');
Это создаст новый div с id "new" в теле.
document.createElement('div');
Вот еще один способ создания div с jQuery.
ELEMENT CLONING
Скажем, у вас есть существующий div на вашей странице, который вы хотите клонировать, используя jQuery (например, чтобы дублировать ввод несколько раз в форме). Вы сделали бы это следующим образом.
$('#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>Создайте DIV в памяти
$("<div/>");
Добавить обработчики кликов, стили и т.д. - и, наконец, вставить в DOM в селектор целевых элементов:
$("<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>просто, если вы хотите создать любой HTML-тег, вы можете попробовать это например
var selectBody = $('body');
var div = $('<div>');
var h1 = $('<h1>');
var p = $('<p>');
если вы хотите добавить какой-либо элемент в flay, вы можете попробовать это
selectBody.append(div);
<div id="foo"></div>
$('#foo').html('<div></div>');
Если вы используете JQuery > 1.4, вам лучше всего отвечать Ian answer. В противном случае я бы использовал этот метод:
Это очень похоже на ответ celoron, но я не знаю, почему они использовали document.createElement вместо нотации 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;}"));
Я также думаю, что использование append() с функцией обратного вызова в этом случае более читаемо, потому что теперь вы сразу же приложите что-то к телу. Но это вопрос вкуса, как всегда при написании любого кода или текста.
В общем, используйте как можно меньше HTML-кода в коде JQuery, так как это в основном код спагетти. Это склонность к ошибкам и ее трудно поддерживать, потому что HTML-String может легко содержать опечатки. Кроме того, он смешивает язык разметки (HTML) с языком программирования (Javascript/JQuery), который обычно является плохой идеей.
в качестве альтернативы append() вы также можете использовать appendTo() который имеет другой синтаксис:
$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");
Вы можете создавать отдельные теги с помощью метода .jquery(). Создайте дочерние теги с помощью метода .append(). Поскольку jQuery поддерживает цепочку, вы также можете применить CSS двумя способами.
Либо укажите его в классе, либо просто вызовите .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);
Во-первых, я добавляю тег списка в свой тег div и вставляю в него данные JSON. Затем я создаю дочерний тег списка, при условии некоторого атрибута. Я присвоил значение переменной, так что мне было бы легко добавить ее.
Я думаю, что это лучший способ добавить div:
Чтобы добавить тестовый div к элементу div с идентификатором div_id:
$("#div_id").append("div name along with id will come here, for example, test");
Теперь добавьте HTML к этому добавленному тестовому div:
$("#test").append("Your HTML");
Если это просто пустой div, это достаточно:
$("#foo").append("<div>")
или
$("#foo").append("<div/>")
Он дает тот же результат.
Надеюсь, что поможет код.:) (я использую)
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);
}
$(HTMLelement) может добиться успеха. Если вы хотите, чтобы epmty div использовал его как $('<div></div>');. Также вы можете установить другие элементы одним и тем же методом. Если вы хотите изменить внутренний HTML после создания, вы можете использовать метод html(). Для получения outerHTML в качестве строки вы можете использовать вот так:
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;
Его довольно просто: $('<div/>').appendTo('body');
Я хотел добавить/добавить просто/легко id в div тоже. Итак, вот что сработало для меня:
$("#id_to_append_div_to").append("<div id='new_id_of_div'>");
или вы можете использовать это:
$("<div id='new_id_of_div'>").appendTo("#id_to_append_div_to");
Отметьте jQuery.create() - плагин jQuery для создания элементов HTML.
Использование:
$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");
Я думаю, что это поможет.
Вы можете использовать .add() для создания нового объекта jQuery и добавить к целевому элементу. Затем используйте цепочку, чтобы продолжить.
Например, 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>var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.id = "messageBox";
newDiv.className = "modal";
newDiv.setAttribute("data-backdrop", "static");
создайте новый div с идентификатором, классом и некоторым атрибутом в тело.
Как насчет этого? Здесь pElement относится к элементу, который вы хотите использовать для этого div внутри (быть дочерним по!:).
$("pElement").append("<div></div");
Вы можете легко добавить что-нибудь еще к этому div в строке - Атрибуты, Контент, вы называете это. Обратите внимание: для значений атрибутов вам необходимо использовать правильные кавычки.
Я только что сделал небольшой плагин jQuery для этого.
Это следует за вашим синтаксисом:
var myDiv = $.create("div");
DOM node Идентификатор может быть указан как второй параметр:
var secondItem = $.create("div","item2");
Это серьезно? Нет. Но этот синтаксис лучше, чем $( "<div> </div> " ), и это очень хорошее значение для этих денег.
(Ответ частично скопирован из: jQuery document.createElement эквивалентен?)