使用变量在 Jquery 中将子项添加到父项

Question

我正在尝试使用 Jquery 在div 内动态创建一个div。当我转储div1 的子节点时，它只显示文本和强。我期待"div1"生main_div_elem孩子，main_div_elem生col_md_8_elem孩子。

有人可以帮我添加col_md_8_elem成为main_div_elem的孩子，main_div_elem为"div1"的孩子吗？

从我的JS函数输出控制台日志。

节点列表 [ #text "这里"， ]

法典：

var id = 1;
function tryThis() {
$( "#div1" ).append( "<strong>Hello</strong>" );
var main_div_elem = $('<div /', {id : 'main_div_elem'.concat(id), "class" : "row"});
var col_md_8_elem = $('<div /', {id : 'col_md_8_elem'.concat(id), "class" : "col-md-8"});
main_div_elem.append(col_md_8_elem);    
$('#div'.concat(id)).append(main_div_elem);
var children = document.getElementById("div1").childNodes;
console.log(children);
}

尝试使用 jquery 实现以下 HTM 代码。

<div class="row">
<div class="col-md-8">
</div>
</div>

谢谢 迪帕克

Answer 1

你好 你可以试试下面的代码。我写得不同，但希望对您有所帮助

$(document).ready(function() {
var id = 1;
var main_div_elem = "<div id=main_div_elem class='row'></div>"
var main_div_elem8 = "<div id='col_md_8_elem' class='col-md-8'></div>"
$("#div1").append(main_div_elem);
$("#main_div_elem").append(main_div_elem8);
var children = $("#div1").html();
console.log(children);
});

#div1 {
height: 100px;
width: 100px;
position: absolute;
padding: 10px;
background-color: red;
}
#main_div_elem {
height: 50px;
width: 50px;
position: absolute;
padding: 10px;
background-color: green;
}
#col_md_8_elem {
height: 20px;
width: 20px;
position: absolute;
padding: 10px;
background-color: blue;
}

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

Answer 2

您的main_div_elem和col_md_8_elem未正确创建。$(..)调用的第一个参数是无效的 HTML。您需要添加一个右尖括号 (>(，如下所示：

var id = 1;
function tryThis() {
$("#div1").append("<strong>Hello</strong>");
var main_div_elem = $('<div />', {
id: 'main_div_elem'.concat(id),
"class": "row"
});
var col_md_8_elem = $('<div />', {
id: 'col_md_8_elem'.concat(id),
"class": "col-md-8"
});
main_div_elem.append(col_md_8_elem);
$('#div'.concat(id)).append(main_div_elem);
var children = $("#div1").html();
console.log(children);
}
$(function() {
tryThis();
});

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