Javascript, добавление еще одного элемента

Я изучаю этот материал, поэтому это мой самый простой сценарий:

var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td");

    t.style.width = "100%";
    t.style.borderCollapse = 'collapse';
    t.border=1;



    // note the reverse order of adding child        
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);

   // more code to populate table rows and cells
   document.getElementById("theBlah").appendChild(t);
   alert(t);
   }

Теперь я хочу добавить что-то, что будет отображаться в <td>, поэтому я подумал:

td.appendChild(document.createTextNode(title));

что прекрасно работает... но если заголовок содержит html, например, простой полужирный тег, например Hello<b> name!</b>, как нам это сделать?

Я думаю, мы создадим новый элемент для <b>, но... после этого я понятия не имею, как это сделать. Просто чтобы уточнить, я хочу, чтобы конечным результатом было то, что Hello<b> name!</b> заканчивается в теге TD следующим образом:

<td>Hello<b> name!</b></td>

Пожалуйста помоги!!

РЕДАКТИРОВАТЬ; Да, я знаю, что могу сделать это с помощью InnerHTML, но мне нужно сделать это таким образом, чтобы обойти политики Firefox AMO. Извините, я должен был упомянуть об этом раньше...


javascript elements
person Ryan    schedule 29.07.2011    source источник
comment
вы можете попробовать изучить jQuery — очень простую и очень эффективную библиотеку javascript jquery.com   -  person Anantha Sharma    schedule 29.07.2011
comment
JQuery, безусловно, великолепен, но я думаю, что еще лучше, если люди найдут время, чтобы сначала узнать больше о Javascript и манипулировании DOM без него. Тогда вы все равно можете писать эффективно, если JQuery не подходит, и у вас есть некоторое представление о том, что происходит под капотом JQuery (или любой другой библиотеки JS).   -  person Newtang    schedule 29.07.2011

Ответы (4)


arrow_upward
1
arrow_downward

Попробуйте:

var td = document.createElement("td");
var b = document.createElement("b");
b.appendChild(document.createTextNode(" name!"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

Результат: <td>Hello<b> name!</b></td>

Пример: http://jsfiddle.net/hGF3e/

person Flash    schedule 29.07.2011

arrow_upward
5
arrow_downward

Попробуйте вместо этого использовать td.innerHTML. Таким образом, вы можете без проблем передавать свои теги в виде разметки.

person Stephen Walcher    schedule 29.07.2011

arrow_upward
2
arrow_downward

Вы бы присвоили innerHTML элементу, который хотите добавить.

td = document.createElement("td");
td.innerHTML = "<em>OMG!</em> I can has <strong>HTML<strong>!"
tr.appendChild(td);
person cwallenpoole    schedule 29.07.2011

arrow_upward
1
arrow_downward

Как уже упоминали другие люди, самое простое, что вы можете сделать, это:

td.innerHTML = "Hello<b> name!</b>";

Вы также можете сделать:

var b = document.createElement('b');
b.appendChild(document.createTextNode(" name"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

Кроме того, чтобы вы знали, тег <b> технически устарел. Вместо этого вы должны использовать <em> или <strong>.

person Newtang    schedule 29.07.2011
comment
На самом деле это технически не устарело - см. stackoverflow.com/questions/1348683/. Тем не менее, я бы не стал его использовать. - person Flash; 29.07.2011
comment
Это вызывает ошибку: b.appendChild(" name"); и ошибка: Uncaught Error: NOT_FOUND_ERR: исключение DOM - person Ryan; 29.07.2011
comment
а в firefox ошибка: Ошибка: необработанное исключение: [Исключение... Не удалось преобразовать аргумент JavaScript arg 0 [nsIDOMHTMLElement.appendChild] nsresult: 0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) местоположение: JS-кадр :: файл:///C:/wamp2 /www/6/TESTS/Noname1.html :: load :: данные строки 38: нет] - person Ryan; 29.07.2011
comment
@Ryan Писал слишком быстро. Я забыл сделать createTextNode вокруг имени. Извини за это. - person Newtang; 30.07.2011
comment
@Андрей Интересно! Спасибо, что поделился! - person Newtang; 30.07.2011