Append вставляет содержимое как строку, а не html с тегами

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте уважаемые форумчане.
Не могу понять, почему не могу вставить элемент при помощи append так

JavaScript
1
2
3
4
 var DivLinkStr = document.createElement('div');
     DivLinkStr.className = 'news_str display_inline';
     DivLinkStr.id = 'user'+data.ID;
DivLinkStr.append("<b>Hello</b>");

По результату он мне выдаст просто строку

HTML5
1
<b>Hello</b>

, а не обработанный тегом жирным слово hello.
Если я воспользуюсь созданием нового элемента, то все нормально вставляется.
Просто на всех сайтах везде обозначено что достаточно конструкции как у меня, чтобы обрабатывало как надо.
Где я не прав, почему не работает?

@sad67man · 29.01.2018, 16:39

MirDj, У вас же DivLinkStr не является jquery объектом.

JavaScript
1
2
3
4
var $DivLinkStr = $('<div/>')
  .addClass('news_str display_inline')
  .attr('id', 'user' + data.ID)
  .append('<b>Hello</b>');

соответственно и jqery-вские методы не работают.

@msheal · 29.01.2018, 17:33

Правильней написать как предложил автор выше, но оставлю свои варианты:

1) с минимумом изменений в исходном коде

JavaScript
1
2
3
4
var DivLinkStr = document.createElement('div');
     DivLinkStr.className = 'news_str display_inline';
     DivLinkStr.id = 'user'+data.ID;
$(DivLinkStr).append("<b>Hello</b>"); // нужно лишь добавить jquery обертку

2) с минимумом промежуточного ненужного кода

JavaScript
1
var yourElement = $('<div id="user'+ data.ID +'" class="news_str display_inline"><b>Hello</b></div>')

@MirDj · 29.01.2018, 19:54 **[ТС]**

sad67man, Вот я тупанул конечно. Спасибо... Только как же у меня вообще тогда работает это все? Почему append вообще срабатывет?

Добавлено через 2 минуты
msheal, Вот честно сказать, мне второй вариант ближе... Но мне на этом форуме объясняли что не правильно создавать разметку таким образом. Правильно создавать каждый элемент и указывать для него все параметры, и потом уже тем же append (допустим) вставлять один элемент в другой...
Так как же правильно в итоге, мне не понятно. Тем способом что написал я, получается очень долго создавать разметку, ну и плюс ко всему, очень большой объем кода получается...

Добавлено через 1 минуту
Но при всем при этом, хочется приучить себя писать код правильно... Но видимо сколько людей, столько и мнений

@msheal · 29.01.2018, 22:27

MirDj, кто вам советовал что создавать так разметку не правильно?) Вы же понимаете что чисто технически эти 2 способа создать элемент почти идентичны? Так к чему писать лишние строки, когда их можно не писать?
Тем более если вы уже подключили jquery, то почему бы не воспользоваться сокращенной записью и вместо var DivLinkStr = document.createElement('div'); не писать var DivLinkStr = ]$('<div/>')?

@sad67man · 29.01.2018, 23:19

У нас к примеру требовалось создавать элементы именно через document.createElement('div'); Правда мало кто следовал этим правилам.
На самом деле это не важно. Делайте как вам угодно, но в первую очередь всегда нужно исходить из читабельности кода, т. е. чтоб другой программист мог легко разобраться, что вы там настрочили). Так что не всегда чем меньше кода, тем лучше. Смотрите по ситуации.

Добавлено через 14 минут
Вы это поймете, когда будете работать с чужим кодом. Представьте, что кому-то потребуется что-то изменить, и чтоб ему не приходилось даже разбирать весь ваш код, а с первого взгляда было все ясно в каком месте можно это сделать. Я вам советую следовать именно такому принципу.

@msheal · 29.01.2018, 23:57

sad67man, разве разобраться в простом html коде вида <div id="user'+ data.ID +'" class="news_str display_inline"><b>Hello</b></div> сложнее, чем в простыне из document.createElement('div')? Шутка ли?

Если надо создавать объемный html внутри js, куда логичней будет не забивать на форматирование иерархии. Покажите как бы выглядела простыня из document.createElement('div') вместо этого приблеженного к реальности кода:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#container').html(`<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Vasya</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Petya</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Masha</td>
      <td>51</td>
    </tr>
  </tbody>
</table>`)

П.С. К слову это тоже создание элемента критикуемым вами способом .append('<b>Hello</b>')

Не по теме:

так и не увидел в ваши рассуждениях хоть одной веской причины забивать на вполне читабельное и простое создание элементов, кроме "У нас к примеру требовалось создавать элементы именно через document.createElement('div')"

@sad67man · 30.01.2018, 00:17

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

@msheal · 30.01.2018, 00:27

sad67man, извиняюсь, погорячился малость) Вы не критиковали, а настоятельно рекомендовали способ через createElement, вот я и захотел узнать почему я 4 года создавал элементы не правильно)

@sad67man · 30.01.2018, 00:56

msheal, Так у нас требовалось по регламенту, видимо именно этот способ и рекомендовали автору темы, как более грамотный. Но на практике таким способом редко пользуются, по крайней мере я практически не видел. Никаких рекомендаций не давал. Автор хочет приучить писать себя код правильно. И я дал совет, что в первую очередь нужно исходить из читабельности кода, а какой способ выбрать решайте сами, по ситуации. Это общий принцип, который применим не только к созданию элементов. Не вижу смысла все повторять, читайте внимательнее, что я написал.

@MirDj · 30.01.2018, 07:05 **[ТС]**

Но при всем при этом, хочется приучить себя писать код правильно... Но видимо сколько людей, столько и мнений

Сообщение от msheal

кто вам советовал что создавать так разметку не правильно?)

Сообщение от msheal

Тем более если вы уже подключили jquery, то почему бы не воспользоваться сокращенной записью и вместо var DivLinkStr = document.createElement('div'); не писать var DivLinkStr = ]$('<div/>')?

Вы меня наверное не поняли. Я имел ввиду не вариант вообще jquery против js, а про то что так:

Сообщение от msheal

var yourElement = $('<div id="user'+ data.ID +'" class="news_str display_inline"><b>Hello</b></div>')

мне делать не советовали. Хотя так наверное безусловно проще, чем куча строк кода, чтобы создать разметку.

Добавлено через 45 минут

Сообщение от sad67man

Так что не всегда чем меньше кода, тем лучше. Смотрите по ситуации.

Ну вот я и говорю, что сколько людей, столько и мнений. А по факту, есть ли разница? Может быть подводные камни какие-то или еще что, то? Или это два абсолютно правильных варианта, просто в разном исполнении?

@msheal · 30.01.2018, 10:15

Сообщение от MirDj

это два абсолютно правильных варианта, просто в разном исполнении?

это два абсолютно одинаковых варианта в одном исполнении. Хочется писать простыню кода сомнительной читабельности или нет возможности подключить jquery - создавайте элементы с помощью document.createElement в противном случае не вижу причин не пользоваться благами цивилизации

@MirDj · 30.01.2018, 10:20 **[ТС]**

Сообщение от msheal

Хочется писать простыню кода сомнительной читабельности или нет возможности подключить jquery - создавайте элементы с помощью document.createElement

jquery подключен. И при помощи него, опять же можно использовать 2 варианта создания, я вот о чем...
Т.е

JavaScript
1
var yourElement = $('<div id="user'+ data.ID +'" class="news_str display_inline"><b>Hello</b></div>')

или

JavaScript
1
2
3
4
var $DivLinkStr = $('<div/>')
  .addClass('news_str display_inline')
  .attr('id', 'user' + data.ID)
  .append('<b>Hello</b>');

@msheal · 30.01.2018, 10:29

MirDj, а теперь представьте себе что-то более сложное чем создание одного элемента с парой атрибутов внутри другого. Теперь попробуйте это написать вторым способом. После этого сделайте тоже самое первым способом, желательно соблюдая форматирование, и сделайте для себя выводы)

@MirDj · 30.01.2018, 11:11 **[ТС]**

Сообщение от msheal

а теперь представьте себе что-то более сложное чем создание одного элемента с парой атрибутов внутри другого.

Да это даже представлять не надо... Я уже намучился....
Слишком сложная структура получается... Я и не приверженец подобного метода и не заступаюсь за него, а просто хотел разобраться как же "правильно" или все-таки и то и другое абсолютно не противоречит "правильному" написанию, просто является разными вариантами...

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	29.01.2018, 19:54 [ТС]
	sad67man, Вот я тупанул конечно. Спасибо... Только как же у меня вообще тогда работает это все? Почему append вообще срабатывет? Добавлено через 2 минуты msheal, Вот честно сказать, мне второй вариант ближе... Но мне на этом форуме объясняли что не правильно создавать разметку таким образом. Правильно создавать каждый элемент и указывать для него все параметры, и потом уже тем же append (допустим) вставлять один элемент в другой... Так как же правильно в итоге, мне не понятно. Тем способом что написал я, получается очень долго создавать разметку, ну и плюс ко всему, очень большой объем кода получается... Добавлено через 1 минуту Но при всем при этом, хочется приучить себя писать код правильно... Но видимо сколько людей, столько и мнений 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	29.01.2018, 22:27
	MirDj, кто вам советовал что создавать так разметку не правильно?) Вы же понимаете что чисто технически эти 2 способа создать элемент почти идентичны? Так к чему писать лишние строки, когда их можно не писать? Тем более если вы уже подключили jquery, то почему бы не воспользоваться сокращенной записью и вместо `var DivLinkStr = document.createElement('div');` не писать `var DivLinkStr = ]$('<div/>')`? 0

@sad67man 2600 / 1504 / 689 Регистрация: 23.08.2015 Сообщений: 3,812
	29.01.2018, 23:19
	У нас к примеру требовалось создавать элементы именно через document.createElement('div'); Правда мало кто следовал этим правилам. На самом деле это не важно. Делайте как вам угодно, но в первую очередь всегда нужно исходить из читабельности кода, т. е. чтоб другой программист мог легко разобраться, что вы там настрочили). Так что не всегда чем меньше кода, тем лучше. Смотрите по ситуации. Добавлено через 14 минут Вы это поймете, когда будете работать с чужим кодом. Представьте, что кому-то потребуется что-то изменить, и чтоб ему не приходилось даже разбирать весь ваш код, а с первого взгляда было все ясно в каком месте можно это сделать. Я вам советую следовать именно такому принципу. 0

@sad67man 2600 / 1504 / 689 Регистрация: 23.08.2015 Сообщений: 3,812
	30.01.2018, 00:17
	msheal, Я не критиковал данный способ, вы что-то попутали. 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	30.01.2018, 00:27
	sad67man, извиняюсь, погорячился малость) Вы не критиковали, а настоятельно рекомендовали способ через createElement, вот я и захотел узнать почему я 4 года создавал элементы не правильно) 0

@sad67man 2600 / 1504 / 689 Регистрация: 23.08.2015 Сообщений: 3,812
	30.01.2018, 00:56
	msheal, Так у нас требовалось по регламенту, видимо именно этот способ и рекомендовали автору темы, как более грамотный. Но на практике таким способом редко пользуются, по крайней мере я практически не видел. Никаких рекомендаций не давал. Автор хочет приучить писать себя код правильно. И я дал совет, что в первую очередь нужно исходить из читабельности кода, а какой способ выбрать решайте сами, по ситуации. Это общий принцип, который применим не только к созданию элементов. Не вижу смысла все повторять, читайте внимательнее, что я написал. 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	30.01.2018, 10:29
	MirDj, а теперь представьте себе что-то более сложное чем создание одного элемента с парой атрибутов внутри другого. Теперь попробуйте это написать вторым способом. После этого сделайте тоже самое первым способом, желательно соблюдая форматирование, и сделайте для себя выводы) 0