使用 javascript 将数据插入到预制的 dom 元素中

Question

我正在写一个漂亮的 javascript 沉重的网页，想知道是否有一种更简洁的方法来组成 html 将插入到 dom 中的元素。目前我正在做类似的事情：

var some_div = "<div class='yaba daba doo' "
some_div += "data-foo='" + some_handy_variable + "'>" + some_html_content + "</div>";

这应该呈现为：

<div class='yaba daba doo' data-foo='some handy id'>html content</div>

但是到达那里的过程并不那么容易解析:(有没有办法预先形成div即

var some_div = "<div class='yaba daba doo' data-foo=''></div>"

然后以某种方式插入 data/variables 然后让 some_div 变量呈现为

<div class='yaba daba doo' data-foo='some handy id'>html content</div>

Answer 1

你更喜欢这样的东西吗？您也可以用同样的方式添加类。

$("<div class='yaba daba doo'>")
  .prop("data-foo", "some handy id")
  .html("html content")

或者像这样：

$("body").append(
  $("<div class='yaba daba doo' data-foo='some handy id'>html content</div>")
)

Answer 2

当然可以：

var some_div = $("<div class='yaba daba doo'></div>") // create the div and store in variable
some_div.attr("data-foo", "some handy id"); // add attribute
some_div.html("html content") // set html

并且您可以使用任何其他 jquery 动态方法 div

Answer 3

我发现使用 jQuery

附加属性非常容易

 $("<div>", {
  id: "someDiv",
  css: {
     height: "50px",
     width: "50px"
  }
}.appendTo("body")

Answer 4

您是否考虑过使用模板框架，例如 Handlebars.js？它可能会帮助您整理您提到的 JS 代码。你会有这样的对象：

var o = { Class: 'yaba daba doo', Data-Foo: 'Some handy id', html: 'Something here' }

还有一个 myTemplate 看起来像：

<div class='{{Class}}' data-foo='{{Data-Foo}}'>{{html}}</div>

然后，您可以使用该模板填充您需要的任何数据。

var template = Handlebars.Compile(myTemplate);
var myResult = template(o);

我知道这并不完全符合您的要求，只是想提供一个解决方案，帮助您保持一切更简洁、更具可扩展性。 :) 考虑一下！

Answer 5

我认为您可以使用 JavaScript 创建 DOM 元素的方式，例如：

<code>
var divEle = document.createElement("div");
divEle.class    = "yaba daba doo";
divEle.data-foo = "some handy id";
</code>

在此之后，将该元素添加为任何其他 DOM 元素的子元素。

<code>
document.body.appendChild(divEle);
</code>

使用 javascript 将数据插入到预制的 dom 元素中

Inserting data into preformed dom elements with javascript

javascript

jquery