如何在UL中迭代使用appendChild和片段LI（）

会挽雕弓如满月，西北望，射天狼。这篇文章主要讲述如何在UL中迭代使用appendChild和片段LI？相关的知识，希望能为你提供帮助。
我正在尝试在列表中建立列表。虽然我可以成功地建立父列表，但不能成功地注入子数组的迭代。
我有一组对象。这些对象中可能包含对象数组。例如：

[ { class: 'math', students: [ student objs ] } ,{ class: 'science', students: [ student objs ] } ]

我想迭代地建立一个班级列表，并在班级内创建学生。

var data = https://www.songbingjia.com/android/[ // { id:'math', students: [ { id:'math student a' }, { id:'math student b'} ] }, { id:'sciences', students: [ { id:'sci student c' }, { id:'sci student d', award: [ { id: "award a" }, { id: "award b"} ] } ] } ]; function fillElement( arr, dom ) { var outerEl = document.createDocumentFragment(); dom.appendChild(document.createElement('ul')); arr.forEach(function ( obj,idx ) { var li = document.createElement('li'); var ul = document.createElement('ul'); li.textContent = obj.id; outerEl.appendChild( li ); dom.querySelector('ul:first-of-type').appendChild( outerEl ); for (var prop in obj) { if( Array.isArray( obj[prop] ) ){ dom = dom.querySelector('li:last-of-type').appendChild(document.createElement('ul')); fillElement( obj[prop], dom ); } } }); }; var dom = document.querySelector("#dom"); fillElement( data,dom);

如何合并两个片段以获得嵌入式dom

< ul> < li> math< /li> < li> < ul> < li> student a< /li> < li> student b< /li> < /ul> < /li> < /ul>

目前我的html就是这样

< div id="dom"> < ul> < li> sciences< ul> < ul> < li> sci student c< /li> < li> sci student d< ul> < ul> < li> award a< /li> < li> award b< /li> < /ul> < /ul> < /li> < /ul> < /ul> < /li> < /ul> < /div>

答案您在这里：
HTML

< body> < ul> < /ul> < /body>

【如何在UL中迭代使用appendChild和片段LI（）】javascript

// Gets the ul tag in the body tag in which we will add our li tags. var ul = document.querySelector('body > ul'); var classes = [ { class: 'math', students: ['student a', 'student b'] }, { class: 'science', students: ['student c', 'student d'] } ]; function fillUlElement(ulElement, classes) {// First we iterate over all the classes. // We can't use class as variable name since that is a reserved keyword // in javascript, so we are using classInfo as a variable name instead. classes.forEach(function (classInfo) { // We create a li tag that we will add to the ul tag at the end // of this function. var li = document.createElement('li'); // We set the name of the class as text in our li tag first. // Be aware that textContent clears all the content in the li tag. // So we need to set the name of the class before we add our // list of students. li.textContent = classInfo.class; // Create the ul tag which will contain the li tags of students. var studentsUlElement = document.createElement('ul'); classInfo.students.forEach(function (student) { var studentElement = document.createElement('li'); studentElement.textContent = student; // Add the li tag with the student name to the ul tag of students. studentsUlElement.appendChild(studentElement); }); // Add our ul tag which contains a list of li tags/student names. li.appendChild(studentsUlElement); // And at last add the li tag, which contains the name of the // class and the ul tag with students, to the main ul tag ulElement.appendChild(li) }); }; // Passing the ul tag and the classes array into this function so we can // do this with other ul tags and arrays with the same format as well. fillUlElement(ul, classes);