Moderators: trava90, athenian200
While creating the starting post, I tried to use a surrounding <groupbox> and .appendChild() to it.
I am manipulating the value of an element that I created - by using the return value of createElement()/cloneNode(), and not of getElementsBy...(). So the result can not depend on where exactly this element was inserted. Especially in those cases, where I modified the .value before adding the element to the DOM.
I agree. But initially I discovered this problem when was working on the "Search Engine Editor" extension, and it is structured exactly as you have described.
Below is a fragment of EngineEditor.xul, which the handler of its "load" event (resided in EngineEditor.js) have to duplicate unpredictable number of times, because it is not known beforehand how many these panels the window must contain.
Understood, this is the sort of situation I meant where one is dynamically adding UI elements.
In examples above I use either createElement(), or cloneNode(). Both functions are described in Web API section, but also both are equally mentioned in XUL documentation:
Creating New Elements
You can create new elements using the createElement() function of the document. It takes one argument, the tag name of the element to create. You can then set attributes of the element using the setAttribute() function and append it to the XUL document using the appendChild() function.
Copying Nodes
To copy nodes however, you may call the cloneNode() function. This function makes a copy of an existing node so that you can add it somewhere else. The original node will stay where it is. It takes one boolean argument which indicates whether to copy all of the node's children or not. If false, only the node is copied, such that the copy won't have any children. If true, all of the children are copied as well.
value
Type: string
Holds the current value of the textbox as a string. The current value may be modified by setting this property.
As I answered to moonbat, the problem initially was observed in a real code, where everything (XUL/JS/CSS) was in separate files.Moonchild wrote: ↑2025-07-08, 07:07I'm not sure why you want to manipulate the XUL tree in-place to begin with. Just separate out the XUL UI elements as UI structure in .xul, any scripting into .js, and treat it as a more traditional trio of XML/JS/CSS than trying to do DOM jiggery-pokery to manipulate the elements.
I suppose a bug due to impermanence of phenomena.
in web content.
This is the normal way of doing it. e.g. tabbed interfaces just disable/hide the tabs (and tab contents) not active but they are all in the UI at the same time.
Code: Select all
<script>
<![CDATA[
var textBox;
window.addEventListener("load", function(e) {
textBox = document.createElement("textbox");
document.documentElement.appendChild(textBox);
textBox.value = "initial value abc";
}, false);
]]>
</script>
In your script you do the same, but it doesn't work:
Code: Select all
<script>
<![CDATA[
var label = document.getElementById("label");
var textBox = document.createElement("textbox");
label.before(textBox);
textBox.value = "initial value";
]]>
</script>
Code: Select all
<script>
<![CDATA[
var textBox;
window.addEventListener("load", function(e) {
var label = document.getElementById("label");
textBox = document.createElement("textbox");
label.before(textBox);
textBox.value = "initial value";
}, false);
]]>
</script>
Anyway, using setAttribute it works too. And you don't need to use events and you can set the initial value before adding the element to the DOM. So for those who don't want to wait... :
Code: Select all
<script>
<![CDATA[
var label = document.getElementById("label");
var textBox = document.createElement("textbox");
textBox.setAttribute('value', "initial value");
label.before(textBox);
]]>
</script>