Создание элементов в JavaScript

Question

У меня много JavaScript-кода, который создает HTML. Например:

function Reply(postId) {
    if (!document.getElementById("reply" + postId)) {
        $("#root" + postId).after("<div id='reply" + postId + "'><textarea cols='70' rows='8' style='margin-bottom: 10px'></textarea><br/><span style='margin-bottom: 30px'><input type='button' value='Submit' /><input type='button' value='Cancel' onclick='$(\"#reply" + postId + "\").remove();'/></span></div>");
    }
}

Как я могу использовать jQuery, чтобы сделать это более читабельным? Как лучше всего создавать новые элементы в JavaScript? Могу ли я увидеть пример?

Answer 1

Стандартным способом является не создание html, а затем добавление или добавление его, а создание dom-элементов и добавление их.

Пожалуйста прочитайте эту замечательную статью о внутреннем HTML или DOM. Тима Скарфа. Это очень хорошо написано, и точки и контраргументы.

Подробнее о DOM можно прочитать здесь. и много информации в справочном руководстве Gecko DOM . .

Извините, что вставляю только ссылки, но многое предстоит пройти.

Если вы хотите быстрый старт. Посмотрите на эту часть Справочника по DOM Gecko. , где говорится о createElement. Какой магический метод ты ищешь.

Answer 2

Для таких вещей я всегда использую EJS.

http://embeddedjs.com/

Снимите угловые скобки с вашего jQuery.

$( ".cancel" ).live( 'click', function() { $( this ).remove(); });

function reply( postId ) {
    if ( $( "#reply" + postId ).size() == 0 ) {
        var context = { postId: postId };
        $( "#root" + postId ).after(new EJS({ url: '/template.ejs' }).render( context ));
    }
}

Поместите их в шаблон со своими острыми маленькими друзьями.

<div id="reply<%= postId %>">
    <textarea cols="70" rows="8" class="reply_editor"></textarea>
    <br>
    <span class="ok_cancel">
        <input type="button" value="Submit">
        <input type="button" value="Cancel" class="cancel">
    </span>
</div>

Встроенные стили - дело рук дьявола.

.reply_editor {
     margin-bottom: 10px
}
.ok_cancel {
    margin-bottom: 30px;
}

Для большей разборчивости не прикрепляйте обработчики в своем HTML. Присоедините их, используя jQuery.

Answer 3

1. переместить элементы стиля в файл CSS.
2. удалите обработчик события onclick, замените его на JQuery live.

3. обернуть elementId в переменную.

   $ (". CancelButton"). Live ("click", function () {$ (this) .remove ();});

   функция Ответить (postId) { var elementId = "reply" + postId; if (! document.getElementById (elementId)) { var element = $ ("#" + elementId) .after ("
   "); }

   }

Answer 4

Если вы хотите полностью использовать функции jquery, посмотрите, работает ли следующее (я не проверял это). Однако я бы действительно советовал против этого, поскольку я понимаю, что прямой синтаксический анализ / рендеринг HTML-строк оптимизируется намного быстрее, чем набор вызовов функции js.

function Reply(postId) {
  var rid = "reply"+postId;
  if (!$('#'+rid)) {
    $('#root'+postID)
      .append("<div/>").attr('id',rid)
        .append("<textarea/>").attr({'cols',70,'row',8,'style','margin-bottom: 10px'})
        .after("<br/>")
        .after("<span />").attr('style','margin-bottom: 30px');
          .append("<input type='button' value='Submit' />")
          .after("<input type='button' value='Cancel' />")
          .onclick(function(){
             $("#"+rid).remove();
          });
  }
}

Answer 5

Два способа:

• Улучшение форматирования этой строки
• Программная установка обработчиков событий

Например:

function Reply(postId) {
    if (!document.getElementById("reply" + postId)) {
        // Generate HTML
        var html = "<div id='reply" + postId + "'>";
        html += "<textarea cols='70' rows='8' style='margin-bottom: 10px'></textarea><br/>";
        html += "<span style='margin-bottom: 30px'>";
        html += "<input type='button' value='Submit' />";
        html += "<input class='cancelButton' type='button' value='Cancel' />";
        html += "</span>";
        html += "</div>";

        // Insert into DOM
        $("#root" + postId).after(html);

        // Install event handlers
        $("#root .cancelButton").bind("click", function() {
            $("#reply" + postId).remove();
        });
    }
}

Использование методов DOM напрямую связано с jQuery, так как он очень медленный.

Обновление: Как говорит Крис, переместите эти стили в файл CSS, чтобы привести в порядок это.

Answer 6

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

Допустим, вы хотите создать абзац внутри DIV с идентификатором "insideme".

$("#insideme").append("<p>I'm adding this</p>");

Это для создания, теперь давайте скажем, что вы хотите вставить существующий DIV:

$ ( "# insideme") добавить ($ ( "# DIV существует"));.

Проверьте документацию , там вы найдете все функции, которые используются для добавления до, после, внутри и т. Д.

Надеюсь, это помогло вам.