javascript - 如何使用JS创建并行Bootstrap列？

Question

我想使用 JavaScript 动态创建并行列，但我不知道如何创建它们。这是我想用 JS 创建的 HTML 代码。

<div class="container">
  <div class="row">
    <div class="col">
      <textarea rows="20" cols="50">At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
    </div>
    <div class="col">
      <p>Que</p>
      <div class="form-group">
        <div class="input-group">
          <input class="form-control" placeholder="test" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

使用 JS 使其动态化并不容易，因为您不能仅将字符串(也是模板文字)附加到节点。您必须首先创建一个节点，然后添加内容，然后追加和全部。

使用 jQuery 非常简单:

const appendChild = (content) => {
    $('.row').append(`
        <div class="col">${content}</div>
    `)
}

// don't know where these would come from, maybe you're getting this info form somewhere outside?
const colOne = `<textarea rows="20" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
    </textarea>
`;

const colTwo =`<p>Que</p>
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" placeholder="test" />
        </div>
    </div>
`;

// wherever you're getting the ones from above, you could call this function directly there
appendChild(colOne);
appendChild(colTwo);

Here's a JSFiddle

---------------------------------------- 编辑 ------------------- --------

正如评论中提到的，可以在 VanillaJS 中做到这一点，所以这里是 JS 选项:

const row = document.querySelector('.row')

const appendChild = (content) => {
    row.insertAdjacentHTML('beforeend', `
        <div class="col">${content}</div>
    `)
}

// don't know where these would come from, maybe you're getting this info form somewhere outside?
const colOne = 
`<textarea rows="20" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
`;

const colTwo =
`<p>Que</p>
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" placeholder="test" />
        </div>
    </div>
`;

// wherever you're getting the ones from above, you could call this function directly there
appendChild(colOne);
appendChild(colTwo);

这是 Js Fiddle