Простой способ манипулирования DOM в Javascript

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.Итак, есть ли какая-то инфраструктура, которая значительно облегчает процесс манипулирования DOM в javascript?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

Вы можете довольно легко абстрагировать часто используемые манипуляции с 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 3

В jQuery:

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

EDIT

Добавьте это к своему документу и сохраните ссылку на него, например, с помощью.

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

Приветствия

Answer 4

Просто создайте новые элементы с помощью подобной функции и присвойте им идентификатор, если вы хотите сослаться на него позже:

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);

Answer 5

Если вы не хотите использовать jQuery, просто сделайте что-то вроде этого:

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

для чтения и быстрой записи.

Если вы ищете систему шаблонов.Посмотрите на функцию Underscore template ().