Нахождение динамически созданного div

Question

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

var div = document.getElementById('windowx');
var btn;
var doc = content.document

if (div)
{
  div = document.getElementById('windowx')
  div.innerHTML = "something new"
}
else
{
  doc = content.document
  div = doc.body.appendChild(doc.createElement("div"))
  div.setAttribute("id", "windowx")
  div.setAttribute("style",
    "position: fixed; top: 100px; left: 100px; width: 20em;"
    + "border: 2px outset orange; background-color: cornsilk;"
    )
  btn = div.appendChild(doc.createElement("button"))
  btn.setAttribute("style", "position: absolute; bottom: 1ex; right: 1ex;")
  btn.setAttribute("onclick", "document.body.removeChild(this.parentNode)")
  btn.appendChild(doc.createTextNode("Zamknij"))
}

Answer 1

Теперь ясно, что это для плагина Firefox:

document.getElementById будет искать этот элемент в пользовательском интерфейсе браузера, а не на веб-странице. Но позже вы добавляете элемент на страницу. Поэтому вы должны искать на странице этот элемент:

var div = content.document.getElementById('windowx');

Кроме того, вы делаете ненужные вызовы методов. Вот более чистая версия вашего кода:

var doc = content.document,
    div = doc.getElementById('windowx'),
    btn;

if (div) {
  div.innerHTML = "something new"
}
else {
  div = doc.body.appendChild(doc.createElement("div"))
  div.setAttribute("id", "windowx")
  div.setAttribute("style",
    "position: fixed; top: 100px; left: 100px; width: 20em;"
    + "border: 2px outset orange; background-color: cornsilk;"
    )
  btn = div.appendChild(doc.createElement("button"))
  btn.setAttribute("style", "position: absolute; bottom: 1ex; right: 1ex;")
  btn.setAttribute("onclick", "document.body.removeChild(this.parentNode)")
  btn.appendChild(doc.createTextNode("Zamknij"))
}

Answer 2

Для меня это было удушье content.document, объект окна не имеет свойства содержимого, поэтому я не уверен, на что вы ссылались.Немного прибрался и похоже на работу.Обратите внимание, что я добавляю обработчик кликов напрямую, вместо того, чтобы устанавливать его как атрибут.Посмотрите здесь, где у меня это вызвано обработчиком нажатия кнопки jQuery: http://jsfiddle.net/hN8uz/1/

var doc = document;
var div = doc.getElementById('windowx');
var btn;

if (div) {
    div.innerHTML = "something new";
}
else {
    div = doc.body.appendChild(doc.createElement("div"));
    div.setAttribute("id", "windowx");
    div.setAttribute("style", "position: fixed; top: 100px; left: 100px; width: 20em;" + "border: 2px outset orange; background-color: cornsilk;");
    btn = div.appendChild(doc.createElement("button"));
    btn.setAttribute("style", "position: absolute; bottom: 1ex; right: 1ex;");
    btn.onclick = function() {
        document.body.removeChild(this.parentNode);
    };
    btn.appendChild(doc.createTextNode("Zamknij"));
}