原生js创建两层div

Question

使用原生js创建一个

<div class="a">
    <div class="b"></div>
</div>

这样的元素

Answer 1

var oDiv=document.createElement('div')
var oDiv2=document.createElement('div')
oDiv.setAttribute("class","a")
oDiv2.setAttribute("class","b")
oDiv.appendChild(oDiv2)

Answer 2

var outerDiv =document.createElement('div')
var innerDiv =document.createElement('div')
outerDiv.classList.add('a')
innerDiv.classList.add('b')
outerDiv.appendChild(innerDiv)

如果是特殊属性的话，可以使用特殊属性的方法，比如设置class可以使用classList或者className：

var outerDiv =document.createElement('div')
var innerDiv =document.createElement('div')
outerDiv.className = 'a'
innerDiv.className = 'b'
outerDiv.appendChild(innerDiv)

一般属性可以使用setAttribute。

Answer 3

createElements = (innerHTML) => {
  const holder = document.createElement('div');
  holder.innerHTML = innerHTML;
  return [].slice.call(holder.children);
};

createElements(`<div class="a">
    <div class="b"></div>
</div>`)