Question

我很好奇是否存在允许您在javascript中更轻松地创建DOM的现有javascript框架。

目前，我正在改变这样的DOM：

var header_field = document.createElement('h1');
header_field.className = "header";
header_field.innerHTML = "This is the header";
parent_dom.appendChild(header_field);

......作为一个例子。

是否有一个框架会说，解释一个javascript对象，并根据它操纵DOM？我有点想象：

jQuery.createDOM(
  [
    { element : 'h2', text : "This is the header", class : "header" }
  ]
);

......或那种风格的东西。

对于复杂的Ajax驱动的站点，我发现自己键入了大量重复的代码，以便创建简单的HTML。那么，是否有一个框架使得在javascript中操作DOM的过程相当容易？ jQuery是否已经提供了这个，我还没有听说过它？

Answer 1

编写重复代码是完全可以避免的。每当您发现多次编写相同的代码时，请将其封装在函数中。

function h1(text) {
    return $("<h1>").addClass("header").text(text);
}

更深入一点：

function el(name, className, text) {
    className = className || "";
    text = text || "";
    return $("<" + name + ">").addClass(className).text(text + "");
}
function h1 (text) {
    return el("h1", "header", text);
}

继续使用它，您可以通过调用以下内容来创建整篇文章：

function article(titleText, author, postDate, content) {
    return el("div", "article").append(
        h1(titleText),
        authorEl(author),
        dateEl(postDate),
        content);
}
$("#articles").append(article("some title", authors.Joe, new Date(), someContent));

编辑：如果这比您正在寻找的更多，jQuery确实可以更轻松地创建元素。例如，您可以为页面上的每个弹出对话框创建一个关闭按钮，如下所示：

$("<div>").addClass("close").text("\xd7").prependTo(".dialog").click(function () {
    $(this).closest(".dialog").hide();
});

同样，使用.css({ backgroundColor: "#fff", border: "1px solid blue" })添加样式，使用.attr({ type: "checkbox" })添加属性，属性：.prop({ checked: true })。名单还在继续。

Answer 2

在jQuery中：

$('<h2 />').addClass('header').html('This is the header');

修改

将此内容添加到您的文档中并保存对其的引用，例如

var myHeader = $('<h2 />').addClass('header').html('This is the header'); $('body').append(myHeader);

干杯

Answer 3

你可以很容易地抽象出常用于函数背后的dom操作：

function buildEntry(obj) {
    return [
        "<li",
        ( obj.class ? " " + obj.class : ""),
        ">",
        ( obj.header ? "<h2>" + obj.header + "</h2>" : "" ),
        ( obj.subheader ? "<h3>" + obj.subheader + "</h3>" : "" ),
        ( obj.content ? "<p>" + obj.content + "</p>" : "" ),
        "</li>"
    ].join("");
}
$.getJSON(url,data,function(){
    var strOutput = "";
    $.each(data,function(i,obj){
        strOutput += buildEntry(obj);
    });
    $("ul").html(strOutput);
});

Answer 4

如果您不想使用jQuery，只需执行以下操作：

 var h2 = '<h2 class="header">This is the header</h2>';
 parent_dom.innerHTML = h2; // use += to append

可读且写得快。

如果您正在寻找模板系统。查看Underscore的template（）函数。

Answer 5

只需使用这样的函数创建新元素，如果要稍后引用它们，请给它们一个ID：

function newElement(tag,class,text,id) {
if(!id) id='';
if(!class) class='';
return $('<' + tag + '>').addClass(class).html(text).attr('id',id);
}

然后你可以这样做：

newElement("h1","class-name-here","Hello, this is a header","id-here");

如果你想将它附加到文档中，只需执行此操作（如果不需要，甚至不需要变量）：

var ele = newElement("h1","class-name-here","Hello, this is a header","id-here");
$('body').append(ele);

在Javascript中操作DOM的简便方法

5 个答案: