Использование тегов html vs элемент создания javascript

Я пытаюсь понять html и javascript и задаюсь вопросом, существует ли функциональная разница между использованием document.createElement(some_tag) и <some tag></some tag>. Я вижу, как использование элемента создания javascript может упростить создание конкретного элемента снова и снова на разных страницах/разделах веб-сайта (вместо копирования и вставки и создания вашего кода). Но это плохая практика/плохой для памяти или что-то использовать элемент create.Использование тегов html vs элемент создания javascript

Например, рассмотрим следующий код:

function createhtml() { 
 
    var li1 = document.createElement("li"); 
 
    var text1 = document.createTextNode("First List Item"); 
 
    li1.appendChild(text1); 
 
    var ul1 = document.createElement("ul"); 
 
    ul1.appendChild(li1); 
 
    document.body.appendChild(ul1); 
 

 
}

<body onload="createhtml()"> 
 
</body>

это лучше сделать это, или просто:

<ul> 
 
    <li>First List Item </li> 
 
</ul>

Или они оба точно одинаковы, а второй - проще или быстрее.

источник

2017-02-18 Moe Chughtai

Вы не получите каких-либо преимуществ в производительности, написав узел HTML узлом с помощью createElement, и, если вы еще не заметили, это намного сложнее написать. –

Самая большая разница будет с DOM. В зависимости от того, когда вы запускаете свой код и как вам нужно использовать такие вещи, как createElement(), DOM знает об изменениях. Когда вы начнете использовать JavaScript больше, вы можете столкнуться с кодом, который пытается работать над чем-то, но терпит неудачу, потому что дерево DOM не знает об этом. Что-то, чтобы заглянуть, а также посмотреть пузырь событий, который находится в том же духе с DOM. – Blizzardengle

Для введенного HTML страница загрузится, и ваш список будет виден.

Для версии JavaScript страница загружается, ваш скрипт будет разобран и запущен, а затем список будет виден.

Это очень простой пример, но прямой HTML будет немного более результативным и для статического контента, гораздо более удобным для обслуживания.

источник

2017-02-18 07:18:00 Paddy

Я обнаружил, что разделение вещей будет сэкономить вам много разочарований по дороге. Определение объектов на вашей странице должно идти в вашем HTML, стилизация и анимация этих элементов должны идти в вашем CSS и делать что-то полезное, должно идти в вашем javascript. Конечно, это не сложное и быстрое правило, но сохранение вещей, разделенных намерениями, облегчает чтение и проще находить то, что вы ищете. Кроме того, в ответ на какой метод быстрее, предварительно собранный HTML будет загружаться быстрее, чем пытаться собрать его в js на лету.

TLDR; создайте элементы в своем HTML, когда это возможно.

источник

2017-02-18 07:21:07 RATKNUKKL

Ваша страница/браузер:

рисовать статический HTML
идет получить JavaScript и запустить его
перерисовывать новые элементы в страницу

В вашем примере здесь это тривиальная вещь, которую пользователь никогда не заметит, но на больших страницах это может вызвать проблемы. Метод JavaScript также менее эффективен с точки зрения вашего времени и эффективности обработки.

Вообще говоря, вы хотели бы использовать JavaScript, когда вам нужно сгенерировать что-то, что может меня изменить после загрузки страницы (например, щелчок, делать вещи) или по-другому в зависимости от обстоятельств, которые присутствуют при загрузке (например, получить список вещей из других источников). Статический/неизменный материал лучше оставить как HTML.

источник

2017-02-18 07:32:42 Michael

Для вашего примера, если вы знаете количество элементов, прежде чем использовать статические html-теги, это лучший вариант, потому что потребуется время и память для добавления в тело.

где в другом случае, если вы не знаете, сколько элементов будет добавлено к телу, тогда вы должны использовать dom. вы можете видеть производительность и память, которые ваши элементы собираются взять, можно увидеть в окне инструментов разработчика «F12».

источник

2017-02-18 08:07:26

Использование тегов html vs элемент создания javascript

ответ

Смежные вопросы