Question

简介

我想知道是否有一种很好的方式来渲染或创建普通/普通JavaScript中的HTML元素，而我只是不知道它，我猜你可以创建一个函数接受某种对象/ JSON结构，然后以这种方式生成它。但是，您还必须在您创建的结构上占用大量线条。我试图看看我是否可以创建占用很少空间的解决方案（就代码行而言），并保持高性能速度。

我当前的解决方案

我目前只是以非常程序化的方式创建HTML元素，例如：

// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

这样做是没有错的，当然，有时我喜欢这样做，例如，如果我有1个HTML元素，我想用JavaScript创建。它的速度远不够快，我认为没有性能问题，尽管我认为它可能更快，不知何故。

其他可能的解决方案

如果您正在做更多动态的事情，即向主体或父标签添加一堆HTML元素，我想一个不那么复杂的解决方案就像我和＃ 39;写在下面。它可能不是有史以来最快的解决方案，特别是对于嵌套的for循环，单独使它变慢。但是，你在哪里进行性能与可读性比率的折衷？显然这是一个模糊的问题，因为一些问题需要100％的性能，而其他问题需要100％的可读性/可维护性，而其他问题需要介于两者之间。我说这个问题就像约70％的性能到~30％的可读性比例。

/**
 * this function is meant to take an array of objects 
 * obviously this is a basic implementation, it could be more complex
 * again, or more sophisticated at least
 */
function renderHTML (arr) {
    for (var i = 0, s = arr.length; i < s; i++) {
    var elm = arr[i];
    var temp = document.createElement(elm.tagType);
    delete elm.tagType; // no longer needed
    for (var key in elm) {
        if (key === "placeWithin") {
        elm[key].appendChild(temp);
      } else if(key === "innerHTML") {
        temp.innerHTML = elm[key];
      } else {
        temp.setAttribute(key, elm[key]);
      }
    }
  }
}


// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

// create a bunch of elements for the above function
var arr = [];

// populate the above array
for (var i = 0, s = 100; i < s; i++) {
    var elm = {
    id : ("htmlID" + i),
    className : "thisisaclass",
    placeWithin : someElm, 
    tagType : "div",
    innerHTML : ("test" + i)
  };
  arr.push(elm);
}

// run the function above 
renderHTML(arr);

凌乱的解决方案

这是另一个解决方案，但是个人认为这个解决方案非常混乱，可能比其他两个解决方案更快，但我不是这个解决方案的粉丝。它确实有效，但至于可读性和可维护性，它非常有限。这只是我编写的初始方式的另一种方式，与使用该功能的解决方案不同，您对所创建的HTML元素的限制，仅仅是因为您已经这样做了只需将它们全部放入一个字符串中即可。

// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

// populate someElm
for (var i = 0, s = 100; i < s; i++) {
    var htmlStr = "<div id='test" + i +"' class=''>";
    htmlStr += "test" + i;
    htmlStr += "</div>";
    someElm.innerHTML += htmlStr;
}

问题

有没有人知道更优雅的创建/呈现HTML元素的方法？

是否有更优雅的方式来创建HTML元素？我还要强调，我试图创建一种基本的呈现HTML的方式，没有起诉jQuery，只是因为它对我的个人需求来说太慢了。表现出 MAIN 的重点。

我知道我可以使用上面的代码进行微优化，以进一步提高性能（即使用for循环从数组末尾到数组开头计数，或者对多个变量使用一个var减速，+我而不是我+等等，我只是保持示例代码相当整洁，使其更具可读性。

Answer 1

模板文字怎么样？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

唯一的问题是他们在ES6中，所以如果你想在旧浏览器中使用你的代码，你将不得不使用一些转换器。

添加小提琴：

＆＃13;

let greetings = {
  "esp": "hola",
  "eng": "hi",
  "fr": "bonjour"
};
let newHtml = "";
Object.keys(greetings).forEach(function(key) {
  newHtml += `<div id=${key}>${greetings[key]}</div>`;
});
window.document.getElementById("test").innerHTML = newHtml;

＆＃13;

<div id="test">

</div>

＆＃13;

从JavaScript

简介

我当前的解决方案

其他可能的解决方案

凌乱的解决方案

问题

1 个答案: