0

While createElement() and appendChild() is the preferred method, it can become tedious for large chunks of HTML.

Here is an example:

<input type="button" name="addbbcode16" id="addbbcode16" value="Quote=" onclick="bbstyle(16)" class="first-button" /> 
<input type="button" value="RemoveTag" onclick="makeChange('remove')" /> 
<input type="button" value="toLower" onclick="makeChange('lower')" /> 
<input type="button" value="toUpper" onclick="makeChange('upper')" /> 
<input type="button" value="TitleCase" onclick="makeChange('titlecase')" class="last-button" />

<br style="clear: both;" /> 
<input type="button" accesskey="b" name="addbbcode6" id="addbbcode6" value="B" onclick="bbstyle(6)" style="font-weight: bold;" class="first-button" /> 
<input type="button" accesskey="i" name="addbbcode8" id="addbbcode8" value="i" onclick="bbstyle(8)" style="font-style: italic;" /> 
<input type="button" accesskey="u" name="addbbcode10" id="addbbcode10" value="u" onclick="bbstyle(10)" style="text-decoration: underline;" /> 
<input type="button" accesskey="l" name="addbbcode12" id="addbbcode12" value="List" onclick="bbstyle(12)" /> 
<input type="button" accesskey="o" name="addbbcode14" id="addbbcode14" value="List=" onclick="bbstyle(14)"  class="last-button" /> 
&nbsp; Font colour: 
<select name="addbbcode18" onchange="makeChange('[color=' + this.form.addbbcode18.options[this.form.addbbcode18.selectedIndex].value+ ']', '[/color]'); this.selectedIndex=0;"> 
<option value="#">Default</option> 
<option style="color: darkred;" value="darkred">Dark Red</option> 
<option style="color: red;" value="red">Red</option> 
<option style="color: orange;" value="orange">Orange</option> 
<option style="color: brown;" value="brown">Brown</option> 
<option style="color: yellow;" value="yellow">Yellow</option> 
<option style="color: green;" value="green">Green</option> 
<option style="color: olive;" value="olive">Olive</option> 
<option style="color: cyan;" value="cyan">Cyan</option> 
<option style="color: blue;" value="blue">Blue</option> 
<option style="color: darkblue;" value="darkblue">Dark Blue</option> 
<option style="color: indigo;" value="indigo">Indigo</option> 
<option style="color: violet;" value="violet">Violet</option> 
<option style="color: white;" value="white">White</option> 
<option style="color: black;" value="black">Black</option> 
</select> 
&nbsp; Font size: 
<select name="addbbcode20" onchange="makeChange('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;"> 
<option value="7">Tiny</option> 
<option value="9">Small</option> 
<option value="12" selected="selected">Normal</option> 
<option value="18">Large</option> 
<option value="24">Huge</option> 
</select>

Are there any alternative?
Can it made into a XUL document/fragment and inserted?

I know some parts can be created with loops. Use of innerHTML is not desired.

nmaier
  • 32,336
  • 5
  • 63
  • 78
erosman
  • 7,094
  • 7
  • 27
  • 46

1 Answers1

1

Besides actually generating the code on the fly (using some loops) or using .innerHTML (not the best idea performance-wise and also prone to security vulnerabilities, so discouraged), you could make it into and XHTML XML document:

  1. Put it in some file or string as a valid XHTML or XUL (or mixed; namespaces, yay) fragment (XML document).
  2. Use XHR or the DOMParser to parse it into a DOM.
  3. .importNode or .adoptNode (deep) into the target document.
  4. Insert the imported/adopted node using the normal DOM API (.appendChild, .insertBefore)
nmaier
  • 32,336
  • 5
  • 63
  • 78
  • Tnx Nils... That is more or less what I thought. What I REALLY wanted to see if it was possible to auto import it. For example, I could have put that in an `overlay.xul` and set its `display` to `none` (so FF inserts it instead of manually doing a XHR etc). Then just grab it whenever I needed it. Problem is that there is no overlay in restartlesss addons. ;) (PS. I am almost always outside the box) – erosman Jul 10 '14 at 16:56
  • Yeah. If this wasn't tagged restartless, I would have mentioned putting stuff into the overlay. -- You're writing restartless add-ons. There is no auto-anything ;) -- Also, how would I know what you *REALLY* wanted to see? I'm not a mind-reader. :p – nmaier Jul 10 '14 at 17:10
  • I am exploring all options, as usual, before deciding on a course of action. I want to make sure I havent missed anything. Maybe it would have been better to word it "what I was really hoping for...." :) – erosman Jul 10 '14 at 17:33