Как создать код информер css+html на javascript?

Question

[ShadowMoon]

Подскажите как генерировать и редактировать небольшой html код.
к примеру есть код:

//Массив свойств css
var css = Array();
//Свойство head
css[0] = {
head: Array('color','family','font-size'),
head_set: Array('black','Arial','12pt')
}
//Свойство text
css[1] = {
text: Array('color','family','font-size'),
text_set: Array('red','Arial','10pt')
}
//Сам статичный код
var static_div = '<table><tr><td class="head"></td></tr><tr><td class="text"></td></tr></table>';

Собственно таблица в которой две строки: заголовок и текст. массив задает для каждого элемента css набор полей его значений. Я не понимаю как мне вывести готовый html код. т.е к примеру функция:
show();
Вывел таблицу с базовыми настройками css которые прописаны в массиве. и последнее это редактировать сам элемент, я тут понимаю что просто присвоить значение элементу массива и перерисовать сам html код. так что просто нужно вывести код, подскажите как это сделать.

В идеале у меня есть форма где прописаны поля для редактирования css, значения которые прописываются в массив CSS. Но как связать массив с генерацией кода и выплюнуть его document.writer`ом???

p.s или хотя бы как на основе этих данных генерировать код и вывести его в textarea, что бы его потом можно было просто вставить на html страницу?

Не хочу использовать framework`и. Заранее спасибо за советы.

Answer 1

[Алексей]

Примерно так:
https://jsfiddle.net/HaJIuBauKa/xr2Lf5cz/1/

//Сам статичный код
var static_div = '<table><tr><td class="head-table">head</td></tr><tr><td class="text">text</td></tr></table>';

// стиль лучше хранить нативно, и лучше не использовать в названии стиля тег
var css = '.head-table { color: black; font-family: Arial; font-size: 12pt }';
css += '.text { color: red; font-family: Arial; font-size: 10pt }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

var $informer = $('div#informer').html(static_div);

Лучше это все обернуть в iframe и работать с ним.

Comments

[ShadowMoon]

Спасибо, то, что нужно. С iframe работать, это просто подключать сам скрипт во iframe?

[Алексей]

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

Answer 2

[Сергей Иванов]

Вам не проще эту таблицу уже держать в html и просто загонять в нее то что будет необходимо?


В моем случае это все одна таблица, в которую я отдаю параметры

Comments

[ShadowMoon]

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