在Javascript中动态创建HTML内容的替代解决方案

我正在做一个网络项目。（绝对没有以前的经验）。 此项目需要从服务器动态检索大量内容（如单击按钮）。 现在，问题是，我必须以整洁、格式化的方式显示内容。例如，可折叠列表、超链接等。我目前正在为此使用JavaScript。像这样：

li = document.createElement("li");
li.innerHTML = "some_content";

我还需要根据Bootstrap的要求向JavaScript中动态创建的元素添加适当的类。 但是代码现在看起来真的很混乱。是否有其他解决方案可以避免在JS中动态创建元素、格式化等？

编辑：

已经有一段时间了，但我发现很容易站起来跑步。我已经在几个项目中使用过它

---

是另一种选择，取决于网站的复杂程度（谷歌支持）

这也是一个很好的选择

---

根据您的技能和网站类型，PHP也可能是一个简单的选择。

您可以尝试一些前端框架。例：（如前评论所述） 它内置了模板引擎。（如注释中所述）所以如果您使用

<ul>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>

html用户将看到

<ul>
  <li>jack</li>
  <li>jimmy</li>
</ul>

杰克
吉米

我没有写angular的控制器代码，所以上面的代码只是为了演示，你可以看看它的文档和教程

Angular是一个MV*前端框架，当您有很多 要在前端显示的数据。（但数据太多会导致性能问题，因为它使用双向数据绑定，请重试）

---

如果你不想要一个框架，你可以尝试一下，你可以使用一个模板解决方案，比如，或者（最好的）。其中的每一个都可以与angular或ember等更大的框架一起使用，但也可以作为独立的模板解决方案

由于您使用的是引导，因此也使用了jQuery

使用jQuery，您可以添加元素、更新其内容并添加如下类：

var $li = $("<li>") // create the li element
    .text("My Text") // add a text node
    .addClass("class1 class2 class3") // add some classes
    .appendTo($("ul#myList")); // insert into your ul

var$li=$（“
”）//创建li元素
.text（“我的文本”）//添加文本节点
.addClass（“class1 class2 class3”）//添加一些类
.appendTo（$（“ul#myList”）；//插入你的保险单

如果您更喜欢单衬里，也可以使用以下选项：

var $li = $("<li class='class1 class2 class3'>My Text</li>")
    .appendTo($("ul#myList"));

var$li=$（“
我的文本”
）
.appendTo（$（“ul#myList”）；

以上两种情况都是这样的：

<ul id="myList"></ul>

把它变成这样：

<ul id="myList"><li class='class1 class2 class3'>My Text</li></ul>

我的文本

似乎是解决方案的完美方案。我只是张贴了一个样本代码从他们这里

您只需像这样创建模板-

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

您可以很好地处理这个输出，只需几分钟

我用它创建了一个Survey Builder页面，最重要的部分是knockout很快，还支持各种js库，如

jQuery、AngularJS等。

你永远不需要担心呈现ui，只需

get/set

数据即可

---

在这里试一试-

听起来你在寻找一个模板引擎（也许还有其他东西）？也许可以看看这个页面，在不同的模板选项之间进行选择：如果你只针对现代浏览器，试试

HTML模板

你可以使用jQuery方式，因为你使用的是引导：

$（“
”）

这些框架对于简单的模板来说是多余的。我同意。。。“取决于网站的复杂程度”。这不是个坏主意。在angularjs的新版本中，bindonce功能被烘焙到框架中。据我所知，帕斯瓦兹的模块已经不再是必要的了。就他所描述的问题而言，即使是击倒也无济于事。

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work