3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471

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

29.01.2018, 16:21. Показов 10919. Ответов 14
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте уважаемые форумчане.
Не могу понять, почему не могу вставить элемент при помощи 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.
Если я воспользуюсь созданием нового элемента, то все нормально вставляется.
Просто на всех сайтах везде обозначено что достаточно конструкции как у меня, чтобы обрабатывало как надо.
Где я не прав, почему не работает?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
29.01.2018, 16:21
Ответы с готовыми решениями:

Вывести в онке строку с html тегами
Здравствуйте! Есть строка с html тегами. Хочу вывести ее в диалоговом окне так, как в браузере. Подскажите как сделать?

Как передать текст с тегами html в php
Передаю в php текст примерно такой &lt;div&gt;&lt;p&gt;bjcfbhcjbcbjc&lt;/p&gt;&lt;p&gt;215151515&lt;/p&gt;&lt;/div&gt; Специально по get, чтобы увидеть где проблема. ...

Как вывести на вьюхе текст из БД с html тегами
Добрый день! Подскажите пожалуйста как вывести на вьюхе текст из БД с html тегами? к примеру в бд есть текст: &lt;span...

14
 Аватар для sad67man
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,814
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-вские методы не работают.
1
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
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>')
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
29.01.2018, 19:54  [ТС]
sad67man, Вот я тупанул конечно. Спасибо... Только как же у меня вообще тогда работает это все? Почему append вообще срабатывет?

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

Добавлено через 1 минуту
Но при всем при этом, хочется приучить себя писать код правильно... Но видимо сколько людей, столько и мнений
0
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
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,814
29.01.2018, 23:19
У нас к примеру требовалось создавать элементы именно через document.createElement('div'); Правда мало кто следовал этим правилам.
На самом деле это не важно. Делайте как вам угодно, но в первую очередь всегда нужно исходить из читабельности кода, т. е. чтоб другой программист мог легко разобраться, что вы там настрочили). Так что не всегда чем меньше кода, тем лучше. Смотрите по ситуации.

Добавлено через 14 минут
Вы это поймете, когда будете работать с чужим кодом. Представьте, что кому-то потребуется что-то изменить, и чтоб ему не приходилось даже разбирать весь ваш код, а с первого взгляда было все ясно в каком месте можно это сделать. Я вам советую следовать именно такому принципу.
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
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')"

0
 Аватар для sad67man
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,814
30.01.2018, 00:17
msheal, Я не критиковал данный способ, вы что-то попутали.
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
30.01.2018, 00:27
sad67man, извиняюсь, погорячился малость) Вы не критиковали, а настоятельно рекомендовали способ через createElement, вот я и захотел узнать почему я 4 года создавал элементы не правильно)
0
 Аватар для sad67man
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,814
30.01.2018, 00:56
msheal, Так у нас требовалось по регламенту, видимо именно этот способ и рекомендовали автору темы, как более грамотный. Но на практике таким способом редко пользуются, по крайней мере я практически не видел. Никаких рекомендаций не давал. Автор хочет приучить писать себя код правильно. И я дал совет, что в первую очередь нужно исходить из читабельности кода, а какой способ выбрать решайте сами, по ситуации. Это общий принцип, который применим не только к созданию элементов. Не вижу смысла все повторять, читайте внимательнее, что я написал.
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
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 Посмотреть сообщение
Так что не всегда чем меньше кода, тем лучше. Смотрите по ситуации.
Ну вот я и говорю, что сколько людей, столько и мнений. А по факту, есть ли разница? Может быть подводные камни какие-то или еще что, то? Или это два абсолютно правильных варианта, просто в разном исполнении?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
30.01.2018, 10:15
Цитата Сообщение от MirDj Посмотреть сообщение
это два абсолютно правильных варианта, просто в разном исполнении?
это два абсолютно одинаковых варианта в одном исполнении. Хочется писать простыню кода сомнительной читабельности или нет возможности подключить jquery - создавайте элементы с помощью document.createElement в противном случае не вижу причин не пользоваться благами цивилизации
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
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>');
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
30.01.2018, 10:29
MirDj, а теперь представьте себе что-то более сложное чем создание одного элемента с парой атрибутов внутри другого. Теперь попробуйте это написать вторым способом. После этого сделайте тоже самое первым способом, желательно соблюдая форматирование, и сделайте для себя выводы)
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
30.01.2018, 11:11  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
а теперь представьте себе что-то более сложное чем создание одного элемента с парой атрибутов внутри другого.
Да это даже представлять не надо... Я уже намучился....
Слишком сложная структура получается... Я и не приверженец подобного метода и не заступаюсь за него, а просто хотел разобраться как же "правильно" или все-таки и то и другое абсолютно не противоречит "правильному" написанию, просто является разными вариантами...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
30.01.2018, 11:11
Помогаю со студенческими работами здесь

Как из буфера взять HTML-текст со всеми тегами?
Вы, лучше скажите, как из буфера взять HTML-текст со всеми тегами??

Как засунуть между тегами php, html скрипт?
Как засунуть между тегами php, html скрипт?

Как добавить в конец многомерного списка строку через append?
Здравствуйте , подскажите как добавить в конец списка строку , нужно добавить ip адрес и количество повторений это два разных столба. ...

Как задать цвет тексту между тегами html циклом
Всем здравствуйте.Я начинающий программист и пока все не просто дается. Нужно решить такую задачу. Дана переменная с текстом. В ней теги,...

Как получить часть подстроки между двумя html-тегами?
Здравствуйте! Подскажите пожалуйста, как из этой строки &lt;TITLE&gt;Отчёт: &amp;lt;OMT-NEW&amp;gt;&lt;/TITLE&gt; получить подстроку OMT-NEW ? Пробовал...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

Новые блоги и статьи
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
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. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru