时间戳

首页 > 解决方案 > 是否可以创建一种 HTML 对象（即使使用框架）

html - 是否可以创建一种 HTML 对象（即使使用框架）

问题描述

我想知道是否可以创建一种 HTML 对象而不是复制粘贴的东西，我想通过 javascript 来做，但想知道是否有更简单的方法来做到这一点（在 JS 中编写 html 有点乏味）。

基本上让我们说一个像这样的div：

        <div class ="col">
            <div class="Title">
                Title
            </div>
            <div class="Text">
                Text
            </div>
        </div>

哪个是最好的方法，拥有某种功能，您可以在其中 objectName.create(title, text) 或拥有像 Function(title, text) 这样的 javascript 函数来创建元素？

标签： html

解决方案

您可以获取外部元素并克隆它，更改其内容并将其附加到您想要的位置。请注意，如果您的元素应该有一个，这可能会重复 id。

function createHtml(title, text) {
  const el = document.querySelector('.col').cloneNode(true);
  el.querySelector('.Title').innerText = title;
  el.querySelector('.Text').innerText = text;
  document.body.appendChild(el);
}

createHtml("Foo", "Bar");
<div class="col">
  <div class="Title">
    Title
  </div>
  <div class="Text">
    Text
  </div>
</div>

另一种选择是从头开始创建元素

function createElement(title, text) {
  const el = document.createElement('div');
  el.clasName = 'col';
  const titleDiv = document.createElement('div');
  titleDiv.className = 'Title';
  titleDiv.appendChild(document.createTextNode(title));
  const textDiv = document.createElement('div');
  textDiv.className = 'Text';
  textDiv.appendChild(document.createTextNode(text));
  
  el.appendChild(titleDiv);
  el.appendChild(textDiv);
  document.body.appendChild(el);
}

createElement("Foo", "Bar");

请注意，有许多框架（如 angular、react、vue 等）可以更轻松/更好地完成类似的事情。

推荐阅读