Javascript, DOM: appendChild и textContent - PullRequest
Новая
       15

Javascript, DOM: appendChild и textContent

0 голосов
/ 29 июля 2011

Я отправил аддон Firefox в каталог mozilla, и он был отклонен из-за этого: 

item.innerHTML =   '<table style="border-collapse: collapse; width: 100%;">'
                  + '<tr><td style="line-height: inherit; padding: 0pt; width: 100%;">'
                   + word.title
                   + '</td></tr>'
                    + '</table>';

Я говорил с редактором, и он сказал мне "use a text node and then insert it using appendChild, textContent, etc"

Для меня это звучит как полная чепуха, я никогда не использовал TextContent, appendChild и т. Д., И я немного растерялся. Можете ли вы показать мне, как выполнить вышеизложенное, и я отредактирую остальные 13 экземпляров, которые у меня есть, в моем сценарии, как указано выше?

Спасибо!

Ответы [ 3 ]

5 голосов
/ 29 июля 2011

Вам, вероятно, нужно сделать что-то вроде этого: 

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

    t.style.width = "100%";

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

   // more code to populate table rows and cells
   item.appendChild(t);

Примечание: Существуют предостережения при создании таблицы таким образом, поскольку в разных браузерах все работает по-разному. Я бы посоветовал проконсультироваться MDN , чтобы быть уверенным в FF.

3 голосов
/ 29 июля 2011

Он хочет, чтобы вы программно создали HTML в JavaScript.Возьмите чтение этого поста , оно должно прояснить для вас.Оставьте комментарий, если вам нужна дополнительная информация.

2 голосов
/ 29 июля 2011

Вместо того, чтобы использовать innerHTML, он хочет, чтобы вы использовали функцию, которая изменяет DOM более прямым образом. AppendChild

Добавляет узел в конец списка дочерних элементов указанного родителя. узел. Если узел уже существует, он удаляется из текущего родителя узел, затем добавляется к новому родительскому узлу

https://developer.mozilla.org/En/DOM/Node.appendChild. Формат для него: var child = element.appendChild(child);

В вашем случае я бы сделал: 

var newText = document.createTextNode(word.title);
locationInDom.appendChild(newText);

Где locationInDom - это то место, где вы собираетесь использовать innerHTML. Если innerHTML собирался в таблицу, то просто добавьте id в конкретный существующий столбец и используйте метод getElementById и добавьте в этот момент.

...