Javascript 如何在HTML结构中添加DOM模型？

我想在html页面中添加DOM结构。就像一行有两个输入字段、按钮、下拉列表等。如何在不使用字符串附加的情况下创建该结构。例如

“
等。
我知道如何创建单个元素，比如

$( "<div></div>" )
  .addClass( "my-div" )
  .on({
    touchstart: function( event ) {
      // Do something
    }
  })
    .appendTo( "body" );

$（“”）
.addClass（“我的div”）
.在({
touchstart：功能（事件）{
//做点什么
}
})
.附于（“主体”）；

但是如何创建DOM结构呢
 使用嵌套的
append
s，如下所示

$('<li>')
    .append(
        $('<p>')
            .text('etc etc')
            .append(AGAIN-SOMETHING-ELSE)
    )
    .append(
        $('<button>')
            .addClass("etc")
            .text('etcetc')
    )
    .appendTo('body');

$（“
”）
.附加(
$（“”）
.text（'etc'）
.append（再次添加-SOMETHING-other）
)
.附加(
$('')
.addClass（“etc”）
.text（'etcetc'）
)
.附于（“主体”）；
反复编写
.appendTo（）
代码？使用模板引擎。基本上是重复（如上面Pointy所建议的）或使用HTML字符串；挑一个。在某些浏览器中，您可以实现。