- Курсы javascript
- Вывод из JavaScript в DIV
- 5 ответов на этот вопрос
- Рекомендованные сообщения
- Присоединяйтесь к обсуждению
- Обсуждения
- Как записать строку из JavaScript в HTML
- Способ 1. Использование метода document.write
- Метод document.write
- Метод document.writeln
- Способ 2. Использование свойства innerHTML
- Особенности поведения свойства innerHTML
- Способ 3. Свойство textContent
- Особенности поведения свойства textContent
- Block Header
- Способ 4. Свойство innerText
- Способ 5. Свойство outerHTML
- outerHTML property
Курсы javascript
Здравствуйте, помогите пожалуйста разобраться со скриптом. Мне нужно, чтобы текст выводился в div, а не в текстовое поле .
function MyFun() // считывает пожелания
var m = document.getElementsByName(‘dzen’);
var wish = «»;
for(var i = 0; i < m.length; i++)if (m[i].checked)
//alert(m[i].value)
wish = m[i].value;
>>
var nameuser = document.getElementsByTagName(‘input’)[0].value
var GlavT = [«С Новым годом!», «С новым счастьем и добром.»];
var text = «»;
var i;
for (i = 0; i < GlavT.length; i++) text += GlavT[i] + "
«;
>
document.getElementById(«demo»).innerHTML = nameuser + «! «+text; //выводит в div имя и первые 2 строки
S1 = «Желаю молодости вечной, # $,Любви огромной, безупречной. Желаю океан безумств И гамму самых теплых чувств!»;
/*var S1 = [«Желаю молодости вечной, & $,», «Любви огромной, безупречной.», «Желаю океан безумств», «И гамму самых теплых чувств!»];
var text2 = «»;
var i;
//k = S1.replace(/\&/g, «любви»));
for (i = 0; i < S1.length; i++) text2 += S1[i] + "
«;
>
document.getElementById(«demo»).innerHTML = text2; Пыталась вывести стих разбитый
в div*/
S2 = «Пусть будут благостными дни, Душа любовью переполнится, Пусть зажигает жизнь огни И все желания исполнятся!»;
//
var a1 = [S1, S2];
var rand1 = Math.floor(Math.random() * a1.length);
Str1 = «Тебя поздравлю с днем рождения, Творческого, пожелаю, вдохновения, Пожелаю сил побольше и терпения, Удачи и хорошего настроения.»;
Str2 = «Поздравляем мы, тебя, с днем рождения, Пусть приходит в дом счастье и веселье, Пусть желание твоё непременно сбудется, А плохое же пускай совсем позабудется.»;
var a2 = [ Str1, Str2];
var rand2 = Math.floor(Math.random() * a2.length);
word1=»»;
word2 = «»;
if (wish == «love»)
word1= «любви»;
word2= «радости»;
>
s=S1.replace (/\#/g, word1);
s=s.replace (/\$/g, word2);
if (wish == «health»)
word1= «здоровья»;
word2= «долголетия»;
>
s=S1.replace (/\#/g, word1);
s=s.replace (/\$/g, word2);
//alert(s);
/*// массивы с прилагательными
var love = [«огромной», «желанной»];
__________________________________
Поиск по масиву окончания «ая»
for(i=0;i
break;
>
>
__________________________________
Должен случайно выбирать из прилагательных с оконччанием «ая» одно.
var love1 = Math.floor(Math.random() * love.length);
var health = [«крепкого», «отличного»];
var health1 = Math.floor(Math.random() * health.length);
var luck = [«огромного», «долгожданного»];
var luck1 = Math.floor(Math.random() * luck.length);
*/
//ВОТ ПОКА ЧТО ГЛАВНАЯ ПРОБЛЕМА. ОН ВСТАВЛЯЕТ ВЫБРАННОЕ ЗНАЧЕНИЕ В ТЕКСТОВОЕ ПОЛЕ, А НУЖНО В ДИВ
document.forms[0].message.value = document.forms[0].holiday.value;// message — имя textarea. нужно поменять, а на что поменять я не знаю.
// document.getElementById(«demo»).innerHTML = text;
if (document.forms[0].holiday.value == «NY» )
if (wish == «love»)
document.forms[0].message.value = nameuser +»! » + GlavT + s ;>
if (wish == «health»)
document.forms[0].message.value = nameuser +»! » + GlavT + s;>
if (wish == «luck»)
document.forms[0].message.value = nameuser +»! » + GlavT + a1[rand1] ;>
if (document.forms[0].holiday.value == «March»)
document.forms[0].message.value = «Поздравляем с 8 Марта!» + nameuser ;
Вывод из JavaScript в DIV
У кого есть идеи как, сделать вывод текста из JavaScript в DIV .
Изменено 30 октября 2008 пользователем sinos
Ссылка на комментарий
Поделиться на других сайтах
5 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
Как записать строку из JavaScript в HTML
Довольно часто приходится сталкиваться с необходимостью записать некий текст, а иногда и html-код из JS в какой-либо элемент html-разметки. Существует несколько способов это сделать. Давайте рассмотрим их подробнее.
Способ 1. Использование метода document.write
Метод document.write существует в JavaScript с незапамятных времен и позволяет вывести не только текст, но и любые теги разметки на вашу html-страницу, например:
Результат внедрения этого скрипта будет таким:
Все бы хорошо, но у этого метода есть одна особенность — он хорошо работает в процессе загрузки html-страницы. Метод document.write вставляет текст в то место html-разметки, где был вызван, ещё до формирования DOM-структуры, которую браузер строит в процессе парсинга страницы. Поэтому строки, записанные тем кодом, который приведен выше, внедряется в html-документ так, как если бы они присутствовали изначально в разметке.
Хуже обстоит дело с попытками использовать метод document.write при клике на кнопку, например. В этом случае текущая страница заменяется на новую с тем текстом, который вы использовали внутри скобок document.write . Попробуйте сами в примере ниже.
Существует также метод document.writeln() , который отличается от document.write() тем, что добавляет символ перевода строки «\n» . В большинстве случаев это никак визуально не видно, т.к. в html-коде для перевода строки нужен тег
, а не перевод строки символом \n . Разницу можно заметить в таком элементе формы, как textarea , где перевод строки как раз выполняется с помощью этого символа.
Для сравнения сделаем несколько строк текста без всяких тегов с помощью обоих методов, а затем применим их для вывода текста внутри textarea .
В примере можно заметить, что при использовании document.writeln() появляется дополнительный пробел между двумя строками в обычном тексте и перевод строки внутри textarea .
Метод document.write
Метод document.writeln
Оба этих метода можно использовать, когда вы учите JavaScript, для того чтобы вывести массив, например, или какую-либо разметку на страницу, а не в консоль. На html-странице, которая уже сформирована, вряд ли стоит применять document.write() или document.writeln() , т.к. они перезапишут ее содержимое.
И мы опять возвращаемся к популярному вопросу «Как записать строку из JS в HTML?». И переходим к свойству innerHTML .
Способ 2. Использование свойства innerHTML
Для любого элемента можно получить и записать свойство innerHTML , которое в соответствии с переводом с английского позволяет управлять внутренним html-кодом выбранного элемента. Это свойство замещает весь html-код, который был внутри выбранного элемента, на тот, который вы присвоили ему в качестве значения.
Например, такой код сотрет все содержимое данной статьи:
Поскольку свойство innerHTML принимает в качестве значения строку, вы вполне можете воспользоваться оператором «+» для конкатенации строк и формировать содержимое элемента таким образом:
Следующий пример позволяет заменить внутреннее содержимое элемента (абзаца) с id=»temp-text» , который содержит внутренние теги, на другой текст с внутренней разметкой.
Нажмите на кнопку «Получить html-разметку абзаца» до и после замены текста — и вы увидите внутренние теги, которые при добавлении внутрь выбранного абзаца отображаются в соответствии с правилами css и html.
Текст с жирным и курсивным форматированием.
Получить html-разметку абзаца Изменить html-разметку абзаца
Есть еще одно отличие свойства innerHTML от метода document.write . Оно заключается в том, что при ошибочном добавлении тегов, в innerHTML браузер скорректирует синтаксис так, чтобы все теги были закрыты.
В предыдущем примере была допущена такая ошибка — не закрыт тег ,- и браузер это исправил, добавив 2 по сути ненужных тега, но при этом сохранив валидность html-кода.
Особенности поведения свойства innerHTML
Нельзя вставлять с помощью innerHTML теги — такой код не выполнится. Хотя есть и обходной способ, когда можно использовать для этой цели события. Подробнее можно прочитать в статье на MDN.
Также свойство innerHTML отсутствует у элементов без содержимого (изображения,
, ), оно может использоваться только для элементов с открывающим и закрывающим тегом.
В приведенном ниже примере мы попытаемся заместить изображение абзацем, но безуспешно.
headphones . innerHTML = ‘
Теперь это абзац
‘ ;
Попробуйте сами. Ничего не происходит, не так ли?
Заменить изображение
Способ 3. Свойство textContent
В том случае, когда вам НЕ нужно записывать строку из JS в html с дополнительной разметкой в виде html-тегов, лучше воспользоваться свойством textContent . Оно позволяет манипулировать только текстом элемента.
В примере ниже вы можете добавить текст с тегами в текстовом поле. Этот текст отобразится в блоке с рамкой, когда вы будете печатать. Если нажать на кнопку «innerHTML» , вы увидите преобразование тегов в текст с форматированием.
Так выглядит этот пример при применении свойства textContent
Тот же текст + теги, но при применении свойства innerHTML
Особенности поведения свойства textContent
- textContent вернет null , если элемент является документом, типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать это свойство в таком виде: document.documentElement.textContent .
- Если элемент представляет собой CDATA, комментарий или текстовый элемент, свойство textContent возвращает текст внутри узла в виде строки (т.н. nodeValue ).
- Для элементов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Т.е. происходит склеивание текста всех вложенных элементов. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
- Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.
Пример ниже демонстрирует, каким образом отображается текст блока со вложенными (дочерними) элементами при использовании свойства textContent .
Block Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur maxime, cumque facilis eos itaque inventore rerum.
Способ 4. Свойство innerText
Свойство innerText подобно innerHTML , но не подразумевает вставку html-тегов, только текст. И с этой точки зрения оно работает так же, как и свойство textContent . Только у них несколько разная поддержка браузерами. По данным caniuse.com innerText поддерживает большинство браузеров, за исключением Firefox до 44 версии, доля использования которого в мире на данный момент составляет 0,17%.
Свойство textContent имеет также очень приличную поддержку браузерами, но не работает в IE версий 6-8, которыми на данный момент пользуется 0,17% от всех компьютеров в мире.
Свойство innerText было введено в свое время Internet Explorer-ом, а затем в 2016 было внедрено в стандарт HTML после адаптации всеми ведущими браузерами. По своим функциям это свойство подобно тексту, полученному пользователем при выделении содержимого элемента курсором и копировании его в буфер обмена. Работает innerText по тому же принципу, что и textContent , но есть некоторые отличия:
- textContent получает содержимое всех элементов, включая и , тогда как innerText этого не делает.
- innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
- Метод innerText позволяет получить CSS, а textContent — нет.
Способ 5. Свойство outerHTML
Свойство outerHTML также, как и innerText , было введено в InternetExplorer и является нестандартным, хотя на данный момент.
Давайте посмотрим, что нам вернет свойство outerHTML на примере.
outerHTML property
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur maxime, cumque facilis eos itaque inventore rerum.