Добавление элемента с определенным стилем с помощью метода appendchild

Question

Это мой код:

(a=document).getElementsByTagName('body')[0].appendChild(a.createElement('div').style.cssText="someCssStyle");

это не работает! но когда я пишу только это:

(a=document).getElementsByTagName('body')[0].appendChild(a.createElement('div'));

Это работает, так почему я не могу добавить элемент div с определенным стилем? Что не так с моей работой? Я хочу добавить элемент div с определенным стилем только из имплантации URL в chrome, используя:

javascript://all of my code goes here

Так что должно быть коротким.

Answer 1

a.createElement('DIV').style.cssText="someCssStyle"

Это вернет "someCssStyle", который будет задан в качестве аргумента (a=document).getElementsByTagName('body')[0].appendChild( функция. Таким образом, div никогда не добавляется. Вы видите проблему здесь?

Вы должны создать DIV, стилизовать его, а затем добавить его в тело. Как это

var div = document.createElement("div");
div.style.cssText = "someCssStyle";

document.body.appendChild(div);

Answer 2

Причина, по которой это не работает, заключается в том, что здесь:

...appendChild(a.createElement('div').style.cssText="someCssStyle")

вы передаете строку ("someCssStyle") в appendChild, а не ссылка на элемент. Результатом присваивания в JavaScript является правостороннее значение.

Я не рекомендую это делать, но вы можете использовать оператор запятой для этого:

(a=document).getElementsByTagName('body')[0].appendChild(d=a.createElement('div'),d.style.cssText="someCssStyle",d);

Обратите внимание, что ваш код и все вышеперечисленное являются жертвами "Ужаса неявных глобалов".

Или, более разумно, функция:

(function(){var a=document,d=document.createElement('div');d.style.cssText="someCssStyle";a.getElementsByTagName('body')[0].appendChild(d)})();

... которая, помимо прочего , не становится жертвой THOIG.