jQuery에서 div 요소 만들기 [중복
-
22-08-2019 - |
문제
이 질문은 이미 여기에 답이 있습니다.
어떻게 만들 수 있습니까? div
요소 jQuery?
해결책
당신이 사용할 수있는 append
(부모의 마지막 위치에 추가하려면) 또는 prepend
(부모의 주먹 위치를 추가하려면) :
$('#parent').append('<div>hello</div>');
// or
$('<div>hello</div>').appendTo('#parent');
또는 사용할 수 있습니다 .html()
또는 .add()
a에서 언급했듯이 다른 대답.
다른 팁
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>')
'생성'a 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>
자바 스크립트 코드 :
//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>
$("<div/>").attr('id','new').appendTo('body');
이것은 신체에 ID "New"가 포함 된 새로운 Div를 만들 것입니다.
document.createElement('div');
jQuery로 div를 만드는 또 다른 기술이 있습니다.
요소 복제
페이지에 jQuery를 사용하여 복제하려는 기존 DIV가 있다고 가정하십시오 (예 : 입력을 양식으로 여러 번 복제하기 위해). 당신은 다음과 같이 그렇게 할 것입니다.
$('#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>
Memory 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>
Ian의 답변과 유사하지만 방법 사용을 올바르게 다루는 예는 발견되지 않았습니다. 이내에 속성 객체 선언이 있으므로 가십시오.
간단히 HTML 태그를 만들려면 예를 들어이 시도를 시도 할 수 있습니다.
var selectBody = $('body');
var div = $('<div>');
var h1 = $('<h1>');
var p = $('<p>');
플레이에 요소를 추가하려면 이것을 시도 할 수 있습니다.
selectBody.append(div);
<div id="foo"></div>
$('#foo').html('<div></div>');
jQuery> 1.4를 사용하는 경우 이안의 대답. 그렇지 않으면이 방법을 사용합니다.
이것은 매우 유사합니다 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()
콜백 함수를 사용하면이 경우에 더 읽기 쉬운 것입니다. 이제 즉시 신체에 무언가가 추가 될 것이기 때문입니다. 그러나 그것은 항상 코드 나 텍스트를 쓸 때처럼 맛의 문제입니다.
일반적으로 jQuery 코드에서 가능한 한 덜 HTML을 사용하십시오. 이것은 대부분 스파게티 코드이기 때문입니다. HTML-string에는 오타를 쉽게 포함 할 수 있기 때문에 오류가 발생하기 쉬우 며 유지하기가 어렵습니다. 또한 마크 업 언어 (HTML)와 프로그래밍 언어 (JavaScript/JQuery)를 혼합하여 일반적으로 나쁜 생각입니다.
또는 부록 ()에도 사용할 수도 있습니다 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를 추가하는 가장 좋은 방법이라고 생각합니다.
id div_id로 div 요소에 테스트 div를 추가하려면 :
$("#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()
방법. out auterhtml을 문자열로 얻으려면 사용할 수있는 것과 같습니다.
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;
당신이 사용할 수있는 .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>
이건 어때? 여기, pElement
원하는 요소를 나타냅니다 div
내부 (자녀가되기 위해! :).
$("pElement").append("<div></div");
당신은 그것에 더 쉽게 추가 할 수 있습니다 div
문자열 - 속성, 내용, 이름을 지정합니다. 속성 값의 경우 올바른 따옴표를 사용해야합니다.
방금 작은 것을 만들었습니다 jQuery 플러그인 그에 대한.
구문을 따릅니다.
var myDiv = $.create("div");
돔 노드 ID는 두 번째 매개 변수로 지정할 수 있습니다.
var secondItem = $.create("div","item2");
심각합니까? 아니요. 그러나이 구문은보다 낫습니다 $ ( "u003Cdiv>u003C/div> "), 그리고 그것은 그 돈에 아주 좋은 가치입니다.
(부분적으로 복사 한 답변 : jQuery document.CreateErement 동등?)